如何在Python中对齐两个HBox内的ipywidgets组件

你的问题出在每个组件的宽度由自身内容自动决定，上下HBox里对应位置的组件宽度不一致，导致无法对齐。下面提供两种可行的解决办法：

方法1：给每个子组件设置固定宽度 #

给所有需要对齐的组件统一设置layout的width属性，让同一列的组件宽度保持一致：

import ipywidgets as widgets

# 定义固定宽度的布局模板
fixed_layout = widgets.Layout(width='250px')

but1 = widgets.RadioButtons(options=["foo", "bar"], layout=fixed_layout)
but2 = widgets.RadioButtons(options=["verylongstringherethisislong", "bar"], layout=fixed_layout)

check1 = widgets.Checkbox(description="asdf", layout=fixed_layout)
check2 = widgets.Checkbox(description="verylongstringherethisislong", layout=fixed_layout)

box_layout = widgets.Layout(
    align_items='flex-start',
    width='1300px',  
    justify_content='flex-start'  
)

widgets.VBox(
    children=[
        widgets.HBox(children=[but1, but1, but2, but2], layout=box_layout),
        widgets.HBox([check2, check2, check1, check1], layout=box_layout)
    ]
)

方法2：使用GridBox实现网格布局 #

GridBox可以直接定义行列结构，自动让同一列的组件对齐，比嵌套HBox更适配这类对齐场景：

import ipywidgets as widgets

but1 = widgets.RadioButtons(options=["foo", "bar"])
but2 = widgets.RadioButtons(options=["verylongstringherethisislong", "bar"])

check1 = widgets.Checkbox(description="asdf")
check2 = widgets.Checkbox(description="verylongstringherethisislong")

# 定义网格布局：2行4列，每列宽度固定为250px
grid_layout = widgets.Layout(
    grid_template_columns='repeat(4, 250px)',
    grid_template_rows='auto auto',
    width='1300px'
)

widgets.GridBox(
    children=[but1, but1, but2, but2, check2, check2, check1, check1],
    layout=grid_layout
)

两种方法都能实现上下组件的水平对齐，你可以根据实际场景选择：方法1适合需要保留HBox嵌套结构的情况，方法2更简洁，适合标准化的网格布局需求。

内容的提问来源于stack exchange，提问作者Václav Bočan