Поместите метку переключателя выше с помощью 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>

... и затем используйте свой собственный метод очистки, чтобы перейти к следующей строке.

(Использование атрибута 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

Так что я знаю, что это не тот ответ, который вы ищете, но я был бы смущен, увидев этот тип макета. Это не стандартно, и это меня оттолкнет. Просто мои $ .02.