html - 使用 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 美元。