使用CSS放置单选按钮标签

Question

我需要能够将单选按钮的标签放在选项上方,而不是左侧或右侧.有没有办法使用CSS来产​​生这种效果？

谢谢!

Answer 1

我想我知道你在找什么,但如果我错过了标记,请纠正我.我假设您希望单选按钮位于其标签下方.如果您可以将<br>s 添加到标记中,这将更容易.

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>

您可以使用它并分别设置两种样式:

<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

所以我知道这不是您正在寻找的答案，但看到这种类型的布局我会感到困惑。这不是标准的，它会让我失望。只是我的 0.02 美元。