Есть ли способ выровнять флажки в форме обратной связи? Пользовательские CSS предложения?

Question

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

Вот что у меня есть: https://mastermclaren.com/checkboxes/

Вот что я хочу: (см. Изображение)

введите описание изображения здесь

Любые предложения очень ценятся! Спасибо за ваше время и советы! :)

Answer 1

Я бы порекомендовал вам взглянуть на css свойство flex , ваша жизнь станет намного проще, когда вы овладеете ею! (Например, здесь: https://css-tricks.com/snippets/css/a-guide-to-flexbox/).

Основная причина выбора flex для этого заключается в том, что вы можете использовать минимальную ширину для элементов списка ( et_pb_contact_field_checkbox ) и элементы будут автоматически уменьшаться до 2 или 1 элемента в строке - в зависимости от ширины (хорошо для мобильного дизайна).

К вашему решению

.et_pb_contact_field_options_list {
  display: flex;
  flex-wrap: wrap; /* Allow childrens to be on next row(s) */
}

.et_pb_contact_field_checkbox {
  display: flex;
  align-items: center; /* Vertical centering of childrens inside */
  flex-basis: 33.33%; /* Gives 33.33% width (you can think of this as width property) */
  box-sizing: border-box; /* Thanks to that you can use padding without increasing it's width */
  padding-right: 15px;
  margin-bottom: 15px;
}

<span class="et_pb_contact_field_options_list">

  <span class="et_pb_contact_field_checkbox">
    <input type="checkbox" />
    <p>1</p>
  </span>
  
  <span class="et_pb_contact_field_checkbox">
    <input type="checkbox" />
    <p>2</p>
  </span>
  
  <span class="et_pb_contact_field_checkbox">
    <input type="checkbox" />
    <p>3</p>
  </span>
  
  <span class="et_pb_contact_field_checkbox">
    <input type="checkbox" />
    <p>4</p>
  </span>
  
  <span class="et_pb_contact_field_checkbox">
    <input type="checkbox" />
    <p>5</p>
  </span>
  
  <span class="et_pb_contact_field_checkbox">
    <input type="checkbox" />
    <p>6</p>
  </span>

</span>

Answer 2

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

.et_pb_contact_field_options_list {
   column-count: 3;
   display: block;
}

В качестве альтернативы вы могли бы также попробуйте CSS сетка -

.et_pb_contact_field_options_list {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
}