在上面使用CSS放置单选按钮标签 [英] Place Radio Button Label Above Using CSS

问题描述

我需要能够将单选按钮的标签放置在选项上方，而不是左侧或右侧。有没有一种方法可以使用CSS来实现这种效果？

THanks！

解决方案

div>

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

  label {float：left;填充：0 1em; text-align：center;}   
 < label for = myChoice1> Choice 1< br /> < input type =radioid =myChoice1name =myChoicevalue =1/>< / label>< label for =myChoice2> Choice ABC< br /> < input type =radioid =myChoice2name =myChoicevalue =ABC/>< / label>< label for =myChoice3> Choice qwerty< br /> < input type =radioid =myChoice3name =myChoicevalue =qwerty/>< / label>< label for =myChoice4> Choice  -  final< br /> < input type =radioid =myChoice4name =myChoicevalue =final/>< / label>  

...然后用你自己的结算方法移动到下一行。

（在< label> s中使用 for 属性在这里有点多余，但它赢得了'不会伤害任何东西。）

I need the ability to place the labels for radio buttons above the selections, and not to the left or the right. Is there a way to use CSS that would give this effect?

THanks!

解决方案

I think I know what you are looking for, but correct me if I'm missing the mark. I'm assuming you will want the radio buttons centered under their labels. This is a lot easier if you are okay with adding <br>s to your markup.

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>

...and then use your own clearing method to move to the next line.

(The use of the for attribute in the <label>s is a little redundant here, but it won't hurt anything.)

这篇关于在上面使用CSS放置单选按钮标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！