在复选框和标签之间填充

Question

对于那里的CSS大师,这个标记输出一个带有Value1右边标签的复选框,但是Value1太靠近复选框了.

<dd id="rr-element">
   <label for="rr-1">
      <input type="checkbox" value="1" id="rr-1" name="rr[]">
      Value 1
   </label>
</dd>

所以我试图padding-right在复选框的右侧创建一个效果,但它不起作用.复选框和标签一起移动.如何仅针对复选框或其文本,以便创建填充间隙？

dd label input {
   padding-right:100px;
}

Answer 1

使用margin-right.padding在元素内部,并且通常使用输入元素表现得很有趣,因为它们是使用操作系统的本机输入组件呈现的,并且通常是一个混乱的定制.

JSFiddle 在这里

Answer 2

复选框和标签之间没有不可点击的间隙。
复选框和标签没有换行断开。
代码缩进不添加空格。
更具可读性。

<dd id="rr-element">
   <input type="checkbox" value="1" id="rr-1" name="rr[]">
   <label for="rr-1">Value 1</label>
</dd>

<style>
#rr-element {
    white-space: nowrap;
}

#rr-element label {
   padding-left: 0.4em;
}
</style>