7

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

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

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

非常感谢你。

4

4 回答 4

22

检查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;
}
于 2012-09-06T07:15:04.420 回答
2

在 CSS 中这样使用

input[type="radio"]{
      //padding: or margin or line-height for better spaces bettween radio button according to your need and design;
}
于 2012-09-06T07:00:16.930 回答
2

试试这个：

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

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

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

希望这有帮助！

于 2012-09-06T07:04:58.443 回答
1

如果您不想使用固定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/

于 2012-09-06T07:11:45.300 回答