Dash中dcc.RadioItems按钮与Div标签同行布局问题求助

问题出在你用html.Div作为标签时，Div默认是块级元素，会独占一行，导致单选按钮（input）和标签Div上下分离。只需调整dcc.RadioItems的labelStyle，让每个选项的容器变成弹性布局，就能实现按钮与标签横向对齐，同时保持选项垂直堆叠，且整体在父容器中居中。

修改后的代码 #

dbc.Container([
    dcc.RadioItems(
        [
            {'label': html.Div(['Label 1']), 'value': 'l1'},
            {'label': html.Div(['Label 2']), 'value': 'l2'},
            {'label': html.Div(['Label 3']), 'value': 'l3'}
        ],
        id="radio-items",
        inline=False,
        # 关键：让每个label变成flex布局，垂直居中对齐，同时设置选项间距
        labelStyle={
            'display': 'flex',
            'align-items': 'center',
            'margin-bottom': '20px',
            'gap': '8px'  # 可选：控制按钮和标签之间的间距
        }
    )
], id="container-radio", style={
    "display": "flex",
    "flex-direction": "column",
    "justify-content": "center",
    "align-items": "center",
    # 可选：给父容器加最小高度，确保垂直居中效果明显
    "min-height": "200px"
})

关键调整说明 #

1. labelStyle设置display: flex和align-items: center：强制每个单选项的容器（label标签）采用弹性布局，让内部的单选按钮（input）和html.Div横向排列并垂直对齐。
2. 将margin-bottom移到labelStyle：原来加在html.Div上的下边距，现在直接作用于整个选项容器，保证选项之间的垂直间距。
3. 可选gap属性：用来控制单选按钮和标签文本之间的水平间距，让布局更美观。

这样修改后，就能实现你想要的o label1横向排列、选项垂直堆叠，同时整体在父容器中水平和垂直居中的效果。

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