html - 使用 CSS 对齐复选框和标签

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

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

这导致对齐问题...



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

最佳答案

您可以将 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>

关于html - 使用 CSS 对齐复选框和标签，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40788268/