1

いくつかのラジオ ボタンにiCheckライブラリを使用しています。ボタンとそのラベルをすべて同じ行に表示したいのですが (jsFiddle hereを参照)、要素を適切にスタイル設定するのに問題があります。

問題は (私が思うに) iCheck が「各入力を div でラップすることです。これは、ユーザーがカスタマイズしたり、利用可能なスキンの 1 つを使用したりできます」( iCheckページの「簡単な使用方法」セクションからの引用)。

私が試したこと

-- 次のように、ライブラリの CSS で表示プロパティだけをオーバーライドします。

.iradio_flat-orange { 表示: インライン !重要; }

結果 - ラジオ ボックスが完全に消えます。

-- ラベルを 1 つにまとめる<span style="display: inline">

結果 - 変更なし。jsFiddle に従ってラジオ ボタンが表示されます。

ラジオボタンを適切にスタイルする方法を知っている人はいますか?

4

1 に答える 1

2

list を使用して機能させ、 andをul liラップしてスタイルを設定できますinputlabellidisplay: inline-block;

このデモを見る

HTML

<p>Are you sure you want to have your details removed from our marketing list?</p>
<ul>
    <li>
        <input type="radio" name="iCheck">
        <label>Yes</label>
    </li>
    <li>
        <input type="radio" name="iCheck">
        <label>No</label>
    </li>

CSS

ul {
    list-style:none;
}
ul li {
    display: inline-block;
    margin-left: 15px;
}
于 2013-09-10T12:34:07.973 に答える