Проблема, поставив флажок и текст в строке

Question

Можно ли как-нибудь сделать флажок и текст встроенным?Возникли проблемы с этим, пробовал встроенные опции через css, но, кажется, я либо не могу его использовать, либо он не работает.

Answer 1

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

.checkboxRow {
  display: flex;
}

<div class="checkboxRow">
  <input id="mycheckbox" type="checkbox">
  <label for="mycheckbox">I am a label</label>
</div>

<div class="checkboxRow">
  <input id="mycheckbox2" type="checkbox">
  <label for="mycheckbox2">I am a label</label>
</div>