如何为复选框标签添加一致的左边距？答案

【问题标题】：How can I add a consistent left margin to a checkbox label?如何为复选框标签添加一致的左边距？
【发布时间】：2015-02-12 21:40:50
【问题描述】：

我在无法轻松修改 HTML 的情况下工作，因此我需要一个 CSS 解决方案来解决下面的边距/填充问题。

代码

HTML

<dd id="rr-element">
   <label for="rr-1">
      <input type="checkbox" value="1" id="rr-1" name="rr[]">
      Do you agree to these terms of service? Note that agreeing to these terms of service may allow us unfettered access to your bank account, wordly possessions, and everything else you hold dear in this world.
   </label>
</dd>

CSS

dd {
    width: 300px;
}

dd label input {
   margin-right: 10px;
}

http://jsfiddle.net/T86h8/403/

输出

当前

想要的

有人知道如何使用纯 CSS 解决方案从当前配置转变为所需配置（参见图片）吗？

谢谢大家。

【问题讨论】：

我不知道您的布局是否可以接受，但请查看jsfiddle.net/Lp6a4de8
很好的解决方案贾斯汀。随意将此迁移到答案。

标签： html css web frontend

【解决方案1】：

真的很hacky，但这会起作用：

dd {
    width: 300px;
}

dd label {
   padding-left:20px;
   display:block;
}

dd label input {
   margin-left:-20px;
   display:block;
   float: left;
}

http://jsfiddle.net/T86h8/407/

【讨论】：

我最喜欢这个解决方案，因为它不会将第一行的对齐与其余行分离。感谢您的帮助。
没问题，很高兴能帮上忙。

【解决方案2】：

使用display:table 和display:table-cell

http://jsfiddle.net/T86h8/405/

HTML：

<dd id="rr-element">
    <input type="checkbox" value="1" id="rr-1" name="rr[]">
    <label for="rr-1">Do you agree to these terms of service? Note that agreeing to these terms of service may allow us unfettered access to your bank account, wordly possessions, and everything else you hold dear in this world.</label>
</dd>

CSS：

dd {
    width: 300px;
    display: table;
}
dd label, dd input {
    display: table-cell;
}
dd label {
    padding-left: 10px;
}

【讨论】：

由于一些限制，我个人正在寻找纯 CSS 解决方案，但我认为您提供的解决方案对于许多用例仍然很有价值。
是的，很抱歉我错过了不容易编辑的 HTML 部分:(

【解决方案3】：

您可以使用否定文本缩进。小提琴 here

CSS

dd {
  width: 300px;
  background:#d7d7d7;
  margin-left:50px;
}

dd label input {
  margin-right:10px;
}
dd label {
  background: #fff;
  display: inline-block;
  text-indent: -28px;
}

【讨论】：

这看起来可行，但它让我有点不舒服。

【解决方案4】：

也许你可以使用padding 和absolute position 的组合，像这样：

dd {
  width: 300px;
  padding-left: 30px;
  position: relative;
  margin:0;
}
dd label input {
  position: Absolute;
  left: 5px;
  top: 5px;
}

<dd id="rr-element">
  <label for="rr-1">
    <input type="checkbox" value="1" id="rr-1" name="rr[]">Do you agree to these terms of service? Note that agreeing to these terms of service may allow us unfettered access to your bank account, wordly possessions, and everything else you hold dear in this world.
  </label>
</dd>

【讨论】：

【解决方案5】：

您可以在输入上设置负边距：

dd {
  width: 300px;
}
dd label input {
  margin-left: -16px;
}

<dd id="rr-element">
  <label for="rr-1">
    <input type="checkbox" value="1" id="rr-1" name="rr[]">Do you agree to these terms of service? Note that agreeing to these terms of service may allow us unfettered access to your bank account, wordly possessions, and everything else you hold dear in this world.
  </label>
</dd>

【讨论】：

【解决方案6】：

这是一些调整后的 CSS。希望对您有所帮助。

dd {
    width: 300px;
    position:relative;
}
dd label {
    display:block;
   margin-left : 20px;
}

dd label input {
   margin-left:-20px;
    float:left;
}

<dd id="rr-element">
   <label for="rr-1">
      <input type="checkbox" value="1" id="rr-1" name="rr[]">
      Do you agree to these terms of service? Note that agreeing to these terms of service may allow us unfettered access to your bank account, wordly possessions, and everything else you hold dear in this world.
   </label>
</dd>

【讨论】：