在两个HBoxes python中对齐ipywidgets

Question

我想水平对齐两个 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")

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)
    ]
)

我当前的代码不能完成这项工作：

Answer 1

这在我的系统上很接近：

import ipywidgets as widgets

but1 = widgets.RadioButtons(options=["foo", "bar"])
but1pt5 = widgets.RadioButtons(options=["foo", "bar"], layout=widgets.Layout(margin='0 0 0 5px') )
but2 = widgets.RadioButtons(options=["verylongstringherethisislong", "bar"], layout=widgets.Layout(margin='0 0 0 4px')  )
but2pt5 = widgets.RadioButtons(options=["verylongstringherethisislong", "bar"], layout=widgets.Layout(margin='0 0 0 4px') )


check1 = widgets.Checkbox(description="asdf", indent=False)
check2 = widgets.Checkbox(description="verylongstringherethisislong", indent=False)
check3 = widgets.Checkbox(description="verylongstringherethisislong", indent=False)
check4 = widgets.Checkbox(description="asdf", indent=False)

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

vbox = widgets.VBox(
    children=[
        widgets.HBox(children=[but1, but1pt5, but2, but2pt5], layout=box_layout),
        widgets.HBox(children=[check2, check3, check1, check4], layout=box_layout)
    ]
)

display(vbox)

结果

请记住，可能仍需要进行一些调整。我怀疑这些是真正的标签，因此您可能还需要进行更多调整。另外，您的系统处理的间距可能略有不同，因此可能需要进行一些调整。希望我在下面提供的详细信息将有助于进行微调。

详情：

我的代码相对于您的代码的关键更改是为复选框小部件设置

indent=False

。默认情况下，ipywidgets 会缩进复选框，以便更好地与其描述保持一致。但是，在这里您不希望这样做，因为它会导致您的案例中的对齐出现重大问题。幸运的是，设置

indent=False

确保复选框不会缩进并且与其容器的左边缘对齐。
在您的情况下，只需为复选框小部件添加设置

indent=False

即可获得相对于原始代码的 90% 的效果。

然而，它仍然没有对齐，尽管缩进被取消后，它的戏剧性要小得多。
接下来，我将

,layout=widgets.Layout(margin='0 0 0 1px')

添加到列左侧显示的复选框的复选框小部件中，并且通过

margin

参数添加某个像素值的 left

layout

CSS 属性有助于第二列中的该属性看起来更好对齐。然而，我意识到其他的不会那么容易，所以我转而向单选按钮添加左边距。这样做我意识到，我需要将它们分开，以便每一列都有一个非常相似的设置小部件，但我可以独立调整一个实际不同的小部件。这就是为什么比你拥有的更多的原因。我可以减少复选框和第二组单选按钮的增益，因为我将边距处理移至单选按钮，并且带有长标签的两个单选按钮是相同的，但我暂时保留了它们，因为您可能需要微调。最后，在您的代码中，单选按钮的边距只需要几个像素的值即可使它们与未缩进的复选框保持一致。