ラジオ ボタンとラベルを同じ行に配置する
HTML フォームでは、ラジオ ボタンとそれに関連付けられたラベルを 1 行に配置することができます。挑戦的。これを実現するには、いくつかの CSS テクニックを使用できます。
推奨される HTML 構造では、ラベル要素と入力要素を配置します。
<code class="html"><label for="one">First Item</label> <input type="radio" id="one" name="first_item" value="1" /></code>
それらを水平に配置するには、次の CSS ルールを追加します。
<code class="css">label { float: left; clear: none; display: block; padding: 0px 1em 0px 8px; } input[type=radio], input.radio { float: left; clear: none; margin: 2px 0 0 2px; }</code>
これにより、ラベルとラジオ ボタンが隣り合って配置されます。複数のラジオ ボタンが同じ行に配置されるようにするには、次のマークアップを使用します。
<code class="html"><fieldset> <div class="some-class"> <input type="radio" class="radio" name="x" value="y" id="y" /> <label for="y">Thing 1</label> <input type="radio" class="radio" name="x" value="z" id="z" /> <label for="z">Thing 2</label> </div> </fieldset></code>
適切な CSS ルールを使用すると、ラジオ ボタンとラベルが同じ行に配置されます。
以上がHTML でラジオ ボタンとラベルを同じ行に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。