ipywidgets：Checkbox在HBox容器中右偏的原因及修正方案

Checkbox组件的默认内部布局会让复选框控件在其分配的宽度容器内靠右对齐，而你设置的表头HTML文本是居中对齐，两者对齐方式不一致，导致视觉上复选框被推到右侧，和表头列不对齐。此外，HBox中元素总宽度仅占28%，剩余空白空间留在右侧，但核心矛盾是Checkbox自身的内部对齐逻辑与表头不匹配。

修改Checkbox的布局属性，让它在分配的宽度容器内左对齐，同时可根据需求调整表头文本的对齐方式，确保列结构一致：

修改后的完整代码 #

from ipywidgets import Checkbox, Text, HBox, VBox, Layout, HTML
from IPython.display import display

# 调整Checkbox布局，添加justify_content='flex-start'让控件左对齐
checkbox = Checkbox(layout=Layout(width='8%', align_self='center', justify_content='flex-start'))
text_field = Text(layout=Layout(width='20%'))
header_row = HBox([
    # 可选：将表头文本改为左对齐，与复选框控件对齐更统一
    HTML(value="<b>Checkbox</b>", layout=Layout(width='8%', text_align='left')),
    HTML(value="<b>Text Field</b>", layout=Layout(width='20%', text_align='left'))
])
row = HBox([checkbox, text_field], layout=Layout(align_items='center'))
ui = VBox([header_row, row])
display(ui)

关键调整点 #

• 给Checkbox的Layout添加justify_content='flex-start'，强制复选框控件在8%的宽度容器内靠左显示，匹配表头列的位置。
• 可选调整表头HTML的text_align为left，让表头文本和复选框控件的对齐方式完全统一，视觉效果更协调。

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