Question

我在桌子的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>

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

我尝试使用width属性，margin属性但没有任何变化。

非常感谢。

Answer 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;
}

Answer 2

在CSS中使用这样的

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

Answer 3

试试这个：

输入[type =“radio”] {margin：10px 0};}

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

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

希望这有帮助！

Answer 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/

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

4 个答案: