Question

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

谢谢！

Answer 1

而不是以下内容：

<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 2

我想我知道你在寻找什么，但如果我错过了标记，请纠正我。我假设您希望单选按钮位于其标签下方。如果您可以将<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>

...然后使用您自己的清算方法移至下一行。

（for中<label>属性的使用在这里有点多余，但不会有任何损害。）

Answer 3

如果没有准确了解您要使用的布局，我无法更具体，但如果您只想获得单选按钮上方的标签，请使用单选按钮上的display：block。（显然，这只是一个例子）

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

Answer 4

所以我知道这不是你要找的答案，但我会很困惑看到那种布局。它不标准，它会让我失望。只是我的$ .02。

使用CSS放置单选按钮标签

4 个答案: