HTML 单选按钮：在同一组的按钮之间添加空格答案

【问题标题】：HTML Radio Buttons: add space between the buttons from the same groupeHTML 单选按钮：在同一组的按钮之间添加空格
【发布时间】：2016-02-27 09:03:59
【问题描述】：

我在表格的 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>

现在我想在这些单选按钮之间添加一些空格，但我不知道该怎么做。

我尝试使用宽度属性，边距属性但没有任何改变。

非常感谢。

【问题讨论】：

使用input[type="radio"]{padding: or margin or line-height}
嗨@ArpitSrivastava，谢谢你的回答。你给我的那行是 CSS 吗？我是 HTML 和 WEB 编程的新手，很抱歉问这个问题。
感谢@ArpitSrivastava。

标签： html radio-button

【解决方案1】：

检查工作示例on jsbin

另外，代码如下：

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：

input[type="radio"]{
  margin: 0 10px 0 10px;
}

【讨论】：

【解决方案2】：

在 CSS 中这样使用

input[type="radio"]{
      //padding: or margin or line-height for better spaces bettween radio button according to your need and design;
}

【讨论】：

【解决方案3】：

试试这个：

输入[type="radio"]{margin:10px 0};}

把它放在 css 文件夹或 html 文件的标题部分。如果你把它放在你的标题部分的 html 文件中，它应该是这样的：

<style type="text/css"> 
   input[type="radio"]{margin: 10px 0};} 
</style>

希望这有帮助！

【讨论】：

【解决方案4】：

如果你不想在按钮上使用固定的padding，那么考虑用<label>标签包裹每个按钮，这样标签也可以点击。

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：

<style type="text/css">
label + label {
    margin-left: 20px;
}
</style>

http://jsfiddle.net/9cJJ9/

【讨论】：