Выровнять ipywidgets внутри двух HBoxes Python

Обновление: использование макета сетки

Это обновление, позволяющее создать четыре столбца RadioButton с флажками, выровненными под каждым столбцом, использует макет сетки после комментариев OP о том, что точная настройка, необходимая с использованием полей, не кажется чистой, как ожидалось.
Тем не менее, ключевое изменение настроек indent=False для виджетов «Флажок» важно, подробности см. под исходным ответом.

import ipywidgets as widgets

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

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)

# Create GridBox layout
grid_layout = widgets.Layout(
    display='grid',
    grid_template_columns='auto auto auto auto',
    grid_gap='10px 10px',
    width='1300px',
    justify_content='flex-start'
)

# Create GridBox
grid_box = widgets.GridBox(
    children=[
        but1, but1pt5, but2, but2pt5,
        check2, check3, check4, check1
    ],
    layout=grid_layout
)

display(grid_box)

РЕЗУЛЬТАТ С СЕТКОЙ

Оригинальный ответ ближе к коду ОП

Это приближается к моей системе:

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)

РЕЗУЛЬТАТ С ИСПОЛЬЗОВАНИЕМ ИСХОДНОГО КОДА

Имейте в виду, что некоторые корректировки все еще могут быть необходимы. Я сомневаюсь, что это настоящие метки, поэтому вам, возможно, придется внести дополнительные изменения. Кроме того, ваша система может обрабатывать интервал немного по-другому, поэтому может потребоваться некоторая корректировка. Надеюсь, детали, которые я привожу ниже, помогут в этой точной настройке.

ОБНОВЛЕНИЕ: говоря о настройках было отмечено, что вы также можете использовать проценты для управления настройкой заполнения. В этом случае я обнаружил, что вот что работает для замены строк с настройками пикселей для заполнения:

but1pt5 = widgets.RadioButtons(options=["foo", "bar"], layout=widgets.Layout(margin='0 0 0 0.4%') )
but2 = widgets.RadioButtons(options=["verylongstringherethisislong", "bar"], layout=widgets.Layout(margin='0 0 0 0.3%')  )
but2pt5 = widgets.RadioButtons(options=["verylongstringherethisislong", "bar"], layout=widgets.Layout(margin='0 0 0 0.2%') )

Это кажется довольно произвольным, но именно то, что я видел, дало разумные результаты в этой ситуации. Я добавляю его, потому что, возможно, он устойчив к изменению размера окна, в отличие от настроек пикселей, как я подозреваю. Действительно, именно из-за этой возможности была предложена настройка процентов здесь и там использование 50% имеет смысл, поскольку в этом случае он центрирует флажок. В отличие от этого случая, где значения кажутся очень произвольными.

Подробности:

Ключевое изменение в моем коде по сравнению с вашим — это установка indent=False для виджетов Checkbox. По умолчанию ipywidgets делает отступы для флажков для лучшего соответствия их описаниям. Однако здесь вам это не нужно, поскольку в вашем случае это вызывает серьезные проблемы с выравниванием. К счастью, настройка indent=False гарантирует, что флажки не будут иметь отступов и будут выровнены по левому краю контейнеров.
В вашем случае, просто добавив этот параметр indent=False для виджетов Checkbox, вы получите 90% результата относительно исходного кода.

Однако он по-прежнему не выровнен, хотя после удаления отступа он выглядит гораздо менее драматично.
Итак, затем я добавил ,layout=widgets.Layout(margin='0 0 0 1px') в виджет «Флажок», чтобы флажок появлялся в левой части ваших столбцов, и это добавление левого свойства margin CSS с некоторым значением пикселя через параметр layout помогло тому, что во втором столбце выглядело лучше выровненным. Однако я понял, что с остальными будет не так просто, и поэтому переключился на добавление левого поля к переключателям. При этом я понял, что мне нужно разделить их так, чтобы каждый столбец имел виджет настройки очень похожий, но на самом деле другой виджет, который я могу настроить независимо. Вот почему их больше, чем было у вас. Я мог бы сократить количество флажков и вернуть усиление второго набора переключателей, поскольку я перенес обработку полей на переключатели, а два переключателя с длинной меткой остались прежними, но я оставил их на данный момент, так как вам может потребоваться точная настройка. . В конце концов, в вашем коде поля для переключателей просто нуждались в значениях в несколько пикселей, чтобы привести их в соответствие с флажками без отступов.