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

Question

我在无法轻易修改 HTML 的情况下工作，因此我需要 CSS 解决下面的 margin/padding 问题。

代码

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 的解决方案从我当前的配置转到我想要的配置（见图片）？

谢谢大家

Answer 1

也许你可以使用 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>

Answer 2

真的很老套，但这行得通：

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/

Answer 3

使用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;
}

Answer 4

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

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>

Answer 5

这里有一些调整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>

Answer 6

您可以使用负文本缩进。 Fiddle 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;
}

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

How can I add a consistent left margin to a checkbox label?

html

css

frontend

web