HTML 单选按钮：在同一组的按钮之间添加空格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12294367/
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
HTML Radio Buttons: add space between the buttons from the same groupe
提问by Milo?
I have 3 radio buttons on the same line in a td of the table like that:
我在表格的 td 的同一行上有 3 个单选按钮，如下所示：
<td align="left">
CHF <input type="radio" name="currency" id="chf_currency" checked="checked" onChange="currencyChanged()" />
USD <input type="radio" name="currency" id="usd_currency" onChange="currencyChanged()"/>
EUR <input type="radio" name="currency" onChange="currencyChanged()"/>
</td>
Now I would like to add some spaces between those radio buttons and I don't know how to do it.
现在我想在这些单选按钮之间添加一些空格，但我不知道该怎么做。
I tryed to use width attribute, margin attribute but nothing changes.
我尝试使用宽度属性，边距属性但没有任何变化。
Thank you very much.
非常感谢。
回答by halofourteen
Check working example on jsbin
检查jsbin 上的工作示例
Also, here is the code:
另外，这里是代码：
HTML:
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<td align="left">
CHF <input type="radio" name="currency" id="chf_currency" checked="checked" onChange="currencyChanged()" />
USD <input type="radio" name="currency" id="usd_currency" onChange="currencyChanged()"/>
EUR <input type="radio" name="currency" onChange="currencyChanged()"/>
</td>
</body>
</html>
CSS:
CSS：
input[type="radio"]{
margin: 0 10px 0 10px;
}
回答by Arpit Srivastava
Use like this in CSS
在 CSS 中像这样使用
input[type="radio"]{
//padding: or margin or line-height for better spaces bettween radio button according to your need and design;
}
回答by Nightgem
Try this:
尝试这个：
input[type="radio"]{margin:10px 0};}
输入[type="radio"]{margin:10px 0};}
put this in the css folder or in the header section of your html file. If your putting this in your html file in your header section, it should look like this:
把它放在 css 文件夹或 html 文件的标题部分。如果你把它放在你的标题部分的 html 文件中，它应该是这样的：
<style type="text/css">
input[type="radio"]{margin: 10px 0};}
</style>
Hope this helped!
希望这有帮助！
回答by Gustonez
If you don't want to use fixed paddingto the buttons, then consider wrapping each one with <label>tag, this will make the labels clickable too.
如果您不想使用固定padding按钮，则考虑用<label>标签包裹每个按钮，这将使标签也可点击。
HTML:
HTML：
<label>CHF <input type="radio" name="currency" id="chf_currency" checked="checked" onChange="currencyChanged()" /></label>
<label>USD <input type="radio" name="currency" id="usd_currency" onChange="currencyChanged()"/></label>
<label>EUR <input type="radio" name="currency" id="eur_currency" onChange="currencyChanged()"/></label>
CSS:
CSS：
<style type="text/css">
label + label {
margin-left: 20px;
}
</style>
