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>

これらのラジオ ボタンの間にスペースを追加したいのですが、その方法がわかりません。

width 属性、margin 属性を使用しようとしましたが、何も変わりません。

どうもありがとうございました。

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

これを試して：

入力[タイプ="ラジオ"]{マージン: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 に答える