在复选框和标签之间填充

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 here

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>