Выровнять переключатели по вертикали, когда они находятся на правой стороне этикетки? - PullRequest
0 голосов
/ 29 марта 2020

Как я могу выровнять переключатели? Я бы хотел, чтобы они были выстроены друг над другом.

jsfiddle

HTML:

<form>
  <label for="male">Male</label>
  <input type="radio" id="male" name="gender" value="male">
  <br>
  <label for="female">Female</label>
  <input type="radio" id="female" name="gender" value="female">
  <br>
  <label for="other">Other</label>
  <input type="radio" id="other" name="gender" value="other">

</form> 

1 Ответ

0 голосов
/ 29 марта 2020

Есть несколько способов сделать это.

Метод 1:

label {
  display: inline-block;
  width: 80px;
}
<html>
<body>

<h2>Radio Buttons</h2>

<form>
  <label for="male">Male</label>
  <input type="radio" id="male" name="gender" value="male">
  <br>
  <label for="female">Female</label>
  <input type="radio" id="female" name="gender" value="female">
  <br>
  <label for="other">Other</label>
  <input type="radio" id="other" name="gender" value="other">
  
</form> 

</body>
</html>

Метод 2:

div {
  display: flex;
  width: 90px;
  justify-content: space-between;
}
<html>
<body>

<h2>Radio Buttons</h2>

<form>
  <div>
  <label for="male">Male</label>
  <input type="radio" id="male" name="gender" value="male">
  </div>
  <br>
  <div>
  <label for="female">Female</label>
  <input type="radio" id="female" name="gender" value="female">
  </div>
  <br>
  <div>
  <label for="other">Other</label>
  <input type="radio" id="other" name="gender" value="other">
  </div>
</form> 

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...