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

【问题标题】：Move the label to the left side of the checkbox using css only仅使用 css 将标签移动到复选框的左侧
【发布时间】：2020-05-11 21:51:19
【问题描述】：

我有以下代码：

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

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

old 浮动在这里也不错：

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>

【讨论】：