如何使输入（复选框）和标签对齐？答案

【问题标题】：How to make input (checkboxes) and label line up?如何使输入（复选框）和标签对齐？
【发布时间】：2018-01-06 00:06:25
【问题描述】：

我们有下面的 html 结构，它导致复选框显示在同一行中。

我们如何使用 CSS 解决方案让每个复选框和标签仅显示在一行中？

代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <input type="checkbox">
  <label> value1</label>
  <input type="checkbox">
  <label> value2</label>
  <input type="checkbox">
  <label> value3</label>
  <input type="checkbox">
  <label> value4</label>
</div>

目标/目标：

无需使用额外的 HTML 标记，例如 <div>，让每个复选框和标签显示在一行中
纯 CSS 解决方案

【问题讨论】：

标签： html css checkbox input label

【解决方案1】：

.list {
 display: table-row 
}

您可以使用 .list 来定位您的 div 的类

.list {
display: table-row
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <input type="checkbox">
  <label> value1</label>
  <input type="checkbox">
  <label> value2</label>
  <input type="checkbox">
  <label> value3</label>
  <input type="checkbox">
  <label> value4</label>
</div>

【讨论】：

我看不出这会如何改变输出中的内容。
@MrLister 我认为他的解决方案在 sn-p 中显示了一行，但不是实际的解决方案。提供的 css 确保它将连续显示。

【解决方案2】：

像这样？

label {
  display: block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">

  <label><input type="checkbox"> value1</label>

  <label><input type="checkbox"> value2</label>

  <label><input type="checkbox"> value3</label>

  <label><input type="checkbox"> value4</label>
</div>

【讨论】：

【解决方案3】：

在不更改 HTML 的情况下，您可以选择使用 CSS 在每个标签后插入换行符。

.list label::after {
   white-space:pre; content:'\0A';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <input type="checkbox">
  <label> value1</label>
  <input type="checkbox">
  <label> value2</label>
  <input type="checkbox">
  <label> value3</label>
  <input type="checkbox">
  <label> value4</label>
</div>

【讨论】：