使用CSS

Question

WooCommerce输出这样的复选框......

<label class="checkbox ">
    <input class="input-checkbox " name="checkbox" id="checkbox" value="1" type="checkbox">
    Tick This Box
</label>

这会导致对齐问题......

我可以通过编辑复选框的输出方式来修复它们，但在此之前，是否有一种更简单的方法可以让CSS看起来像这样？

Answer 1

您可以checkbox放置position: absolute。

.checkbox {
  display: inline-block;
  vertical-align: top;
  padding-left: 25px;
  position: relative;
}

.checkbox input {
  position: absolute;
  left: 0;
  top: 0;
}

<label class="checkbox">
    <input class="input-checkbox " name="checkbox" id="checkbox" value="1" type="checkbox">
    Tick This Box
</label>
<label class="checkbox">
    <input class="input-checkbox " name="checkbox" id="checkbox" value="1" type="checkbox">
    This is a multi line label with a lot of text. Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet...
</label>

Answer 2

将代码段运行完美

.checkbox {
  padding-left:10px;
  position: relative;
}

.checkbox input {
 float:left
}

<label class="checkbox">
    <input class="input-checkbox " name="checkbox" id="checkbox" value="1" type="checkbox">
    Tick This Box
</label>