ラジオ ボタンとラベルを同じ行に配置する

HTML フォームでは、ラジオ ボタンとそれに関連付けられたラベルを 1 行に配置できます。挑戦的。これを実現するには、いくつかの CSS テクニックを使用できます。

推奨される HTML 構造では、ラベルと入力要素を配置します。

First Item

水平方向に配置するには、次の 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;
}

これにより、ラベルとラジオ ボタンが隣り合って配置されます。複数のラジオ ボタンが同じ行に配置されるようにするには、次のマークアップを使用します:

    Thing 1
    Thing 2
  

適切な CSS ルールを使用すると、ラジオ ボタンとラベルが同じ行に配置されます。