css - 问题放置复选框和内联文本

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>