仅使用 css 将标签移动到复选框的左侧

Question

我有以下代码：

<div>
 <span>
  <input type="checkbox">
  <label>I want this to be on the left side</label>
 </span>
</div>

而且我想仅使用 css 样式将标签移动到复选框的左侧，因为我无法更改 HTML 文件，因为它是自动生成的。有什么想法吗？ :)

Answer 1

一种简单的方法是使用 flexbox 顺序属性。

.flex-control {
  display: flex;
}

.flex-control input {
  order: 2;
}

<div>
 <span class="flex-control">
  <input type="checkbox">
  <label>I want this to be on the left side</label>
 </span>
</div>

Answer 2

display:flex 和 ordering 总能解决此类问题

span {
  display:flex;
}

label {
  order:1;
}

input {
  order:2;
}

<div>
 <span>
   <input type="checkbox">
  <label>I want this to be on the left side</label>
 </span>
</div>

Answer 3

Flexbox 可以做到无需设置 order

span {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
}

label {
  margin-right: .5em;
}

<div>
  <span>
  <input type="checkbox">
  <label>I want this to be on the left side</label>
 </span>
</div>

Answer 4

old float 在这里也不错：

span {
  overflow:hidden;
  display:inline-block;
}
label {
  float:left;
}

<div>
 <span>
  <input type="checkbox">
  <label>I want this to be on the left side</label>
 </span>
</div>

Move the label to the left side of the checkbox using css only