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

Question

我正在处理无法轻松修改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的解决方案从我当前的配置转到我想要的配置（参见图片）？

谢谢大家。

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

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

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

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

Answer 5

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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