Блог

Заметил эту проблему в моей собственной веб-разработке.

С моей разметкой (включая Materialize):

 <label>
   <input style="padding-top: 5px;" type="checkbox" class="filled-in" />
   <span>Hyper ( $5)</span>
</label>
  

Когда я проверяю результат этого, я получаю флажок, который выглядит как:

Как я могу это исправить, чтобы он был правильно выровнен с моим текстом?

Вы можете добавить этот стиль CSS:

 [type="checkbox"] .filled-in :not(:checked)   span:not(.lever):after {
    margin-top: 3px;
}

[type="checkbox"] .filled-in:checked   span:not(.lever):after {
    margin-top: 3px;
}
  

Что приведет к исправлению вашего выравнивания. Вы также можете изменить свой SCSS-файл для компиляции в forms/_checkboxes.scss в двух местах.

По состоянию на сегодняшний день (сентябрь 2020), добавить под 134 и 158:

 margin-top: 3px;