对齐 Python Dash 应用中第一列和第二列的高度

Question

我有一个可能很简单的问题，但我无法解决。我的 Python Dash 仪表板中有两列，它们的高度未对齐，请参见此处：

我需要在我的代码中更改什么才能使两列处于相同高度？

非常感谢任何帮助。

这是我的代码：

app = dash.Dash(__name__)

app.layout = html.Div([
    
            html.Div([

            html.Label('Material 1'),
            dcc.Dropdown(
                id='s1m1s',
                options=[{'label': i, 'value': i} for i in available_indicators],
                value=options1[0],
            ),
            
            html.Label('Material 1'),
            dcc.Dropdown(
                id='s1mdf45',
                options=[{'label': i, 'value': i} for i in available_indicators],
                value=options1[0],
            ),
           
           
        ], style={'width': '20%', 'display': 'inline-block'}),

            html.Div([
            
                
            html.Label('m3'),
            daq.NumericInput(
                id='s2m1_num',
                min=0,
                max=200,
                value=0,
                ),
            
            html.Label('m3'),
            daq.NumericInput(
                id='s2m2_num',
                min=0,
                max=200,
                value=0,
                ),

        ], style={'width': '20%', 'display': 'inline-block'})


])

Answer 1

您可以将 'vertical-align': 'top' 添加到两列的 style 词典中，以确保它们在顶部对齐，如下所示。

import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_daq as daq

app = dash.Dash(__name__)

app.layout = html.Div([

    # first column
    html.Div(

        children=[

            html.Label('Material 1'),

            dcc.Dropdown(
                id='s1m1s',
                options=[{'label': i, 'value': i} for i in ['option_1', 'option_2', 'option_3']],
                value='option_1',
            ),

            html.Label('Material 1'),

            dcc.Dropdown(
                id='s1mdf45',
                options=[{'label': i, 'value': i} for i in ['option_1', 'option_2', 'option_3']],
                value='option_2',
            ),

        ],

        style={
            'width': '20%',
            'display': 'inline-block',
            'vertical-align': 'top',
        }

    ),

    # second column
    html.Div(

        children=[

            html.Label('m3'),

            daq.NumericInput(
                id='s2m1_num',
                min=0,
                max=200,
                value=0,
            ),

            html.Label('m3'),

            daq.NumericInput(
                id='s2m2_num',
                min=0,
                max=200,
                value=0,
            ),

        ],

        style={
            'width': '20%',
            'display': 'inline-block',
            'vertical-align': 'top',
        }

    )

])

if __name__ == '__main__':
    app.run_server(debug=True, host='127.0.0.1')

对齐 Python Dash 应用中第一列和第二列的高度

Aligning the height of the first and second column in Python Dash app

python

plotly-dash