如何在Python Dash应用中对齐两列组件的高度

问题原因 #

你当前使用的inline-block布局默认垂直对齐规则为基线对齐，且第一列的dcc.Dropdown组件本身高度高于第二列的daq.NumericInput组件，没有给父容器设置统一的布局约束就会出现高度错位的问题。

解决方案 #

推荐你使用Flex布局实现对齐，这也是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%'}),

    # 第二列
    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%'})
# 外层父容器新增Flex布局配置
], style={'display': 'flex', 'align-items': 'flex-start', 'gap': '10px'})

如果需要两列高度完全拉平，哪怕内容少的列也要和高的列高度一致，把外层style里的align-items: 'flex-start'替换为align-items: 'stretch'即可。

如果你不想改动原有inline-block布局，只要给两个列的style属性新增vertical-align: 'top'和统一的最小高度配置即可：

# 两个列的style都修改为如下格式
style={'width': '20%', 'display': 'inline-block', 'vertical-align': 'top', 'min-height': '120px'}

内容的提问来源于stack exchange，提问作者awi1100