如何在 Dash、Python 中并排放置下拉菜单

Question

我对 dash 还很陌生，并试图将两个下拉菜单并排放置，但它们似乎根本不起作用，而是彼此位于下方。我想我搞砸了 HTML div 的“className”排列。代码如下：

app.layout = html.Div([

html.Div( [

    html.H1("Web Application Dashboards with Dash", style={'text-align': 'center'}),

 ] ),

html.Div(
className = "row",children =[
    html.Div(className='six columns', children=[
        dcc.Dropdown(
            id='dropdown_dataset',
                    options=[
                        {'label': 'diabetes', 'value': 'diabetes'},
                        {'label': 'Custom Data', 'value': 'custom'},
                        {'label': 'Linear Curve', 'value': 'linear'},
                    ],
                    value='diabetes',
                    clearable=False,
                    searchable=False,
        )])
    ,html.Div(className='six columns', children=[
        dcc.Dropdown(
        id='dropdown_dataset_2',
        options=[
            {'label': 'sinh', 'value': 'sinh'},
            {'label': 'tanh', 'value': 'cosh'},
        ],
        value='diabetes',[![enter image description here][1]][1]
        clearable=False,
        searchable=False,
    )])
  ])
  ])



  if __name__ == '__main__':
        app.run_server(host='127.0.0.1',port = '5000',debug=False,use_reloader=False)

你能指出我犯错的地方吗，是否有任何文档可以参考？

Answer 1

这将做到。我已添加display='flex'到包含两个下拉列表的 div，并将仅包含单个下拉列表的 div 的宽度设置为 50%。您当然可以使用 ID 或类名在 CSS 文件中设置这些样式，而不是像这样内联编码它们。

    html.Div(
        className="row", children=[
            html.Div(className='six columns', children=[
                dcc.Dropdown(
                    id='dropdown_dataset',
                    options=[
                        {'label': 'diabetes', 'value': 'diabetes'},
                        {'label': 'Custom Data', 'value': 'custom'},
                        {'label': 'Linear Curve', 'value': 'linear'},
                    ],
                    value='diabetes',
                    clearable=False,
                    searchable=False,
                )], style=dict(width='50%'))
            , html.Div(className='six columns', children=[
                dcc.Dropdown(
                    id='dropdown_dataset_2',
                    options=[
                        {'label': 'sinh', 'value': 'sinh'},
                        {'label': 'tanh', 'value': 'cosh'},
                    ],
                    value='diabetes',  # [![enter image description here][1]][1]
                    clearable=False,
                    searchable=False,
                )], style=dict(width='50%'))
        ], style=dict(display='flex'))