html - CSS を使用してラジオ ボタン ラベルを上に配置する

Question

ラジオボタンのラベルを選択範囲の上に配置する機能が必要です。左または右には配置できません。この効果を与える CSS を使用する方法はありますか?

ありがとう！

Answer 1

私はあなたが探しているものを知っていると思いますが、マークが欠けている場合は修正してください. ラジオボタンをラベルの下の中央に配置する必要があると思います。マークアップに s を追加しても問題がなければ、これははるかに簡単です<br>。

label {
  float: left;
  padding: 0 1em;
  text-align: center;
}

<label for="myChoice1">Choice 1<br />
  <input type="radio" id="myChoice1" name="myChoice" value="1" />
</label>

<label for="myChoice2">Choice ABC<br />
  <input type="radio" id="myChoice2" name="myChoice" value="ABC" />
</label>

<label for="myChoice3">Choice qwerty<br />
  <input type="radio" id="myChoice3" name="myChoice" value="qwerty" />
</label>

<label for="myChoice4">Choice--final<br />
  <input type="radio" id="myChoice4" name="myChoice" value="final" />
</label>

...そして、独自の消去方法を使用して次の行に移動します。

( s でのfor属性の使用は、<label>ここでは少し冗長ですが、何も害はありません。)

Answer 2

以下の代わりに:

<label>Label <input type="radio" id="val" name="val" value="hello"></label>

これを使用して、2 つを別々にスタイルできます。

<label for="val">Label</label>
<input type="radio" id="val" name="val" value="hello">

Answer 3

どのようなレイアウトを目指しているかを正確に確認しないと、これ以上具体的には言えませんが、ラジオ ボタンの上にラベルを表示したいだけの場合は、ラジオ ボタンで display:block を使用してください。（明らかに、これは単なる例としてインラインです）

<label>Label <input style="display:block;" type="radio" id="val" name="val" value="hello" /></label>

Answer 4

これがあなたが探している答えではないことはわかっていますが、そのタイプのレイアウトを見ると混乱します。それは標準的ではなく、私を先延ばしにします。ちょうど私の $.02。