ホームページ  >  記事  >  ウェブフロントエンド  >  ラジオボタンとラベルを同じ行に表示するにはどうすればよいですか?

ラジオボタンとラベルを同じ行に表示するにはどうすればよいですか?

Barbara Streisand
Barbara Streisandオリジナル
2024-11-04 03:06:29462ブラウズ

How to Display Radio Buttons and Labels on the Same Line?

ラジオ ボタンとラベルの同一行表示

フォームを作成する場合、ラジオ ボタンとそれに対応するラベルを含めることが望ましい場合があります。同じ行に表示されます。ただし、デフォルトでは、ラジオ ボタンはラベルの下に表示されます。

ラジオ ボタンとラベルを位置合わせしようとすると、次の問題が発生しました:

<form>
    <label>First Item</label>
    <input type="radio">
    
    <label>Second Item</label>
    <input type="radio">
    
    <input type="submit">
</form>

この場合、ラジオはそのラベルの下に表示されます。ラベル。これに対処するために、次の解決策が実装されました。

ラベルと入力要素の両方を左にフロートし、位置合わせが達成されるまでパディングとマージンを調整します。

さらに、最適な互換性を得るために、クラスを追加します。 Internet Explorer の古いバージョンのラジオ ボタンに名前を付けます。

同じ行に複数のラジオ ボタンがあるフォームの場合、推奨されるマークアップは次のとおりです:

<fieldset>
    <div class="some-class">
        <input type="radio" class="radio" name="..." value="...">
        <label for="...">...</label>
    </div>
</fieldset>

次の CSS を使用します:

fieldset {
    overflow: hidden;
}

.some-class {
    float: left;
}

label {
    float: left;
    display: block;
    padding: 0 1em 0 8px;
}

input[type=radio] {
    float: left;
    margin: 2px 0 0 2px;
}

これらの手法を実装することで、ラジオボタンとラベルの同一行表示を実現できます。

以上がラジオボタンとラベルを同じ行に表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。