垂直对齐单选按钮，当它们位于标签的右侧时？

Question

如何对齐单选按钮？ 我希望他们排成一排。

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>

Answer 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>

方法二：

 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>

垂直对齐单选按钮，当它们位于标签的右侧时？

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-03-29 13:08:47

垂直对齐单选按钮，当它们位于标签的右侧时？

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-03-29 13:08:47

解决方案1
0 已采纳 2020-03-29 13:08:47