我想使用 CSS 对齐我的单选按钮答案

【问题标题】：I would like to align my radio buttons using CSS我想使用 CSS 对齐我的单选按钮
【发布时间】：2020-07-15 22:12:44
【问题描述】：

我试图在 html 和 css 中进行表单调查。我希望我的单选按钮垂直对齐，但是我有点卡住了，因为我已经尝试了一段时间。这是我的代码：

<p>Choose your education level:</p>
<input type="radio" name="education" value="1">High School degree</input>
<br>
<input type="radio" name="education" value="2">College degree</input>
<br>
<input type="radio" name="education" value="3">Masters degree</input>
<br>
<input type="radio" name="education" value="4">PhD degree</input>

and my CSS code is:

input[type=radio] {
  text-align: left;
}

【问题讨论】：

你能详细说明一下垂直对齐吗？默认情况下，您的代码显示在另一个下方，垂直对齐
还应注意，这不是单选按钮的编写方式 - developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
了解input 元素。 不需要结束标签。

标签： html css flexbox radio-button alignment

【解决方案1】：

试试这个代码

input[type=radio] {
  vertical-align: middle;
  margin: 0 10px 0 0;
  }

<p>Choose your education level:</p>
<input type="radio" name="education" value="1">High School degree
<br>
<input type="radio" name="education" value="2">College degree
<br>
<input type="radio" name="education" value="3">Masters degree
<br>
<input type="radio" name="education" value="4">PhD degree

【讨论】：