Place Radio Button Label Above Using CSS

问题

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!

回答1:

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.)

回答2:

Instead of the following:

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

You can use this and style the two separately:

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

回答3:

I can't be more specific without seeing exactly what layout you are going for, but if you just want to get the label above the radio button, use display:block on the radio button. (obviously, this is inline just as an example)

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

回答4:

So I know this isn't the answer you are looking for, but I would be confused to see that type of layout. It is not standard and it would put me off. Just my $.02.

来源：https://stackoverflow.com/questions/463785/place-radio-button-label-above-using-css

标签

html

css

radio-button