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

Question

我有下面的代码，我想把标签移到复选框的左边，只用css样式，因为我不能改变HTML文件，因为是自动生成的。

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

我想把标签移到复选框的左边，只用css样式，因为HTML文件是自动生成的，我不能改变它。)

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

Answer 2

display:flex和订购帮助总是解决这样的问题。

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

该 旧的 浮动在这里也是不错的。

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>