CSS 复选框和标签之间的填充
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3877460/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Padding between checkbox and label
提问by jblue
For the CSS gurus out there, this markup outputs a checkbox with a label Value1to its right, but Value1is too close to the checkbox.
对于那里的 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>
So I'm trying to create a padding-righteffect to the right of the checkbox, but it's not working. The checkbox and label move together. How can I target the checkbox only or its text only so I create a padding gap?
所以我试图padding-right在复选框的右侧创建一个效果，但它不起作用。复选框和标签一起移动。如何仅定位复选框或仅定位其文本，以便创建填充间隙？
dd label input {
padding-right:100px;
}
回答by Pekka
回答by NOYB
No unclickable gap between checkbox and label.
No line wrap disconnection of the checkbox and label.
No spaces added by code indentations.
More readable.
复选框和标签之间没有不可点击的间隙。
复选框和标签没有换行断开。
代码缩进不添加空格。
更具可读性。
<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>
