-1

私は次のhtmlを持っています。

<td>
    <div id="form_comparison" class="field radio_field">
        <input type="radio" id="form_comparison_0" name="form[comparison]" value="1"/>
        <label for="form_comparison_0">Increased</label>
        <input type="radio" id="form_comparison_1" name="form[comparison]" value="2" />
        <label for="form_comparison_1">About the same</label>
        <input type="radio" id="form_comparison_2" name="form[comparison]" value="3" />
        <label for="form_comparison_2">Decreased</label>
    </div>
</td>

cssを使用して、ラジオボタンを垂直に配置して、ラベルが同じ行のそれぞれのラジオボタンの直後に表示されるようにするにはどうすればよいですか?

4

2 に答える 2

4

tdフォーム レイアウトを設計している場合、テーブルを無視してフォームの設計に使用するよりも、これを要素内にラップした理由がわかりませんdiv。inputあなたの質問に来て、ラベルをタグに巻き付けて使用することができdisplay: block;ますlabel

#form_comparison label {
    display: block;
}

このようにinput使用してそれぞれをラップしますlabel

<label for="form_comparison_0">
    <input type="radio" id="form_comparison_0" name="form[comparison]" value="1"/>
    Increased
</label>

デモ

マークアップを変更する権限がない場合は、CSScontentプロパティを使用white-space: pre;すると、目的の出力が得られます

label:after {
    content: "\A";
    white-space: pre;
    margin-bottom: 10px;
}

デモ(マークアップの変更なし)

注: Web サイト内のすべての要素 を選択して適用する代わりに、内部の要素 のみを選択する#form_comparison label代わりに使用します。labellabel#form_comparison labellabel#form_comparison

于 2013-05-20T07:34:05.903 に答える