0

ラジオ ボタンの間隔が均等になりません。「margin-right: 250px;」を追加してみました。別の方法と一緒ですが、探している結果が得られません。ボタンをページ上で等間隔に配置し、中央揃えにします。また、ラジオ ボタンの横にあるテキストにスタイルを追加しようとしましたが、コードの CSS に組み込む方法がわかりません。ただし、コードは本体で機能します。

JSFiddle は次のとおりです。http://jsfiddle.net/2DJsP/embedded/result/

CSSは次のとおりです。

#navlist li {
margin-left: auto;
margin-right: auto;
}
style="color:#fa7f28; font-size:20px; font-weight:bold;
4

3 に答える 3

3

現在使用している HTML マークアップを考えると、次の CSS は最も少ない量の CSS を使用するアプローチです。

#navlist li > input { display:inline-block; margin:0 5px 0 50px; }

http://jsfiddle.net/2DJsP/4/

インライン要素には適用されないことに注意marginしてください。の表示を使用すると、およびの使用が有効になりますが、現在のフローで要素とそれに関連するテキストを保持します。paddinginline-blockmarginpadding

于 2013-09-14T02:26:11.287 に答える
2

マークアップを制御すると仮定すると、簡単な方法は、ラジオ ボタンと関連するテキストをspan要素でラップし、displayのspanをinline-blockに設定し、共通の幅を設定することです。

<span><input type="radio" onclick=tryToMakeLink(); name="q1" value="AT&T" />ATT</span>
<span><input type="radio" onclick=tryToMakeLink(); name="q1" value="Other" />Other</span>
<span><input type="radio" onclick=tryToMakeLink(); name="q1" value="Unlocked" />Unlocked</span>

CSS:

#navlist li span {
    display: inline-block;
    width: 6em;
}

デモ: http://jsfiddle.net/2DJsP/3/

于 2013-09-14T02:26:18.743 に答える
1

最新のブラウザーでは、次のように Flexbox を使用して要素を均等に分散できますjustify-content: space-between;。

#navlist li {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
}

text-align: justify他のブラウザの場合、疑似要素を使用してこの (一種の) トリックをエミュレートして、行の折り返しを強制することができます。この編集された fiddleの両方の例を参照してください。

于 2013-09-14T03:32:10.067 に答える