Html 如何更改单选按钮与其文本之间的间距？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3655265/
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
How to change spacing between radio button and its text?
提问by nickb
I have the following HTML:
我有以下 HTML：
<input type="radio" name="beds" value="1" />1+
<input type="radio" name="beds" value="2" />2+How do I change the spacing between the radio button and the "1+" text? I'd like the text to be closerto the radio button, but the browser is inserting a certain amount of undefined padding between the two elements.
如何更改单选按钮和“1+”文本之间的间距？我希望文本更接近单选按钮，但浏览器在两个元素之间插入了一定数量的未定义填充。
回答by casablanca
Many HTML elements have a default margin setting. You can override this and set it to 0. In your case, you want to reset margin-righton the radio button:
许多 HTML 元素都有默认的边距设置。您可以覆盖它并将其设置为 0。在您的情况下，您希望margin-right在单选按钮上重置：
<input type="radio" name="beds" value="1" style="margin-right: 0" />1+
You probably want to add it to your stylesheet so that it applies to all radio buttons:
您可能希望将其添加到样式表中，以便它适用于所有单选按钮：
input[type="radio"] {
margin-right: 0;
}
回答by Yi Jiang
You'll need the labelelement.
你需要这个label元素。
<input type="radio" name="beds" value="1" id="first" /><label for="first">1+</label>
<input type="radio" name="beds" value="2" id="second" /><label for="second">2+</label>
You can then style this like this:
然后你可以这样设计：
label {
margin-left: -3px;
}
Also note the use of the forattribute for accessibility purposes.
还要注意for出于可访问性目的使用该属性。
