Question

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

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

代码

＆＃13;

<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>

＆＃13;

目标/目标：

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

Answer 1

喜欢这个吗？

＆＃13;

label {
  display: block
}

＆＃13;

<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>

＆＃13;

Answer 2

.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>

Answer 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>

如何输入（复选框）和标签排队？

3 个答案: