减少两个布局组件之间的空间答案

【问题标题】：Reducing the space between two layout components减少两个布局组件之间的空间
【发布时间】：2020-07-01 10:40:15
【问题描述】：

从截图中可以看出，下拉菜单和按钮之间有很大的空间。我希望此按钮位于下拉列表旁边。我尝试了造型，但我不会减少这个巨大的空间。

如何解决这个问题？

截图：

代码：

    import dash
    import dash_core_components as dcc
    import dash_html_components as html
    from dash.dependencies import Input, Output, State, MATCH, ALL
    import dash_bootstrap_components as dbc
    
    
    app = dash.Dash(__name__, suppress_callback_exceptions=True)
    
    app.layout = html.Div([
        html.Button("Add Filter", id="dynamic-add-filter", n_clicks=0),
        html.Div(id='dynamic-dropdown-container', children=[]),
    ])
    
    @app.callback(
        Output('dynamic-dropdown-container', 'children'),
        [Input('dynamic-add-filter', 'n_clicks')],
        [State('dynamic-dropdown-container', 'children')])
    def display_dropdowns(n_clicks, children):
        new_element = html.Div([
            dcc.Dropdown(
                id={
                    'type': 'dynamic-dropdown',
                    'index': n_clicks
                },
                options=[{'label': i, 'value': i} for i in ['NYC', 'MTL', 'LA', 'TOKYO']],
                style=dict(
                        width='40%',
                        # verticalAlign="middle"
                        # display='flex',
                        float="left",
                    )
            ),
            html.Button('Button 1', id='btn-nclicks-1', n_clicks=0, style={'margin-right': '35em'}),
    
    
            html.Div(
                id={
                    'type': 'dynamic-output',
                    'index': n_clicks
                }
            )
        ])
        children.append(new_element)
        return children
    
    
    @app.callback(
        Output({'type': 'dynamic-output', 'index': MATCH}, 'children'),
        [Input({'type': 'dynamic-dropdown', 'index': MATCH}, 'value')],
        [State({'type': 'dynamic-dropdown', 'index': MATCH}, 'id')],
    )
    def display_output(value, id):
    
        return  html.Div(children=[html.Div([
        html.Div('Dropdown {} = {}'.format(id['index'], value)),
        # html.Button('Button 1', id='btn-nclicks-1', n_clicks=0,  style={'float': 'right'}),
        ])
        ])
    
    
    if __name__ == '__main__':
        app.run_server(debug=True)

【问题讨论】：

标签： plotly plotly-dash plotly-python

【解决方案1】：

将包含下拉列表和按钮的div 设置为具有display='flex' 样式，并将下拉列表的宽度从40% 更改为200 之类的东西，这样它就不会那么宽了。然后按钮将适合它旁边。在我的机器上用这些样式确认。下拉菜单也不需要float='left' 样式。

【讨论】：