ラジオボタンとラベルを同じ行に表示するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Barbara Streisand

リリース： 2024-11-04 03:06:29

オリジナル

492 人が閲覧しました

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 サイトの他の関連記事を参照してください。