plotly - 减少两个布局组件之间的空间

Question

从屏幕截图中可以看出，下拉菜单和按钮之间有一个巨大的空间。 我希望这个按钮位于下拉菜单旁边。我尝试过造型，但我不想缩小这个巨大的空间。

如何解决这个问题？

屏幕截图:

代码:

    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)

Answer 1

将包含下拉列表和按钮的 div 设置为 display='flex' 样式，并将下拉列表的宽度从 40% 更改 code> 到类似 200 的值，所以它不是那么宽。然后按钮就会紧挨着它。在我的机器上确认了这些样式。下拉菜单也不需要 float='left' 样式。