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

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

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

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

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