纯HTML/CSS表单单选按钮与文本错位问题及解决

我最近在用纯HTML和CSS搭建表单时，碰到了个头疼的小问题：单选按钮和它旁边的文本死活对不齐。明明在测试环境里显示正常，放到实际网页里就错位了，试了调整margin-bottom完全不管用，折腾半天才找到问题根源，分享给大家参考。

问题重现 #

测试环境里显示正常的代码片段：

CSS代码：

.row {
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: 40% 30%;
  align-content: center;
  grid-gap: 20px;
}

HTML代码：

<div class="row">
  <label id="number-label" for="Age">* How likely is that you would recommend freeCodeCamp to a friend?</label>
  <ul style="list-style:none">
    <li class="radio">
      <label>Definitely<input type="radio" name="radio-button" order="1" class="userRating"></label>
    </li>
  </ul>
</div>

但把这段代码放到实际项目里，单选按钮和“Definitely”文本就出现了错位，怎么调外边距都没效果。

问题根源排查 #

最后我发现，问题出在全局样式里的这一行：

input { height: 30px; }

全局给所有input元素设置了固定高度，而单选按钮这类原生表单控件本身有默认的尺寸，强制设置30px高度会打破它和相邻文本的对齐关系，直接导致错位。

解决方法 #

只需要给单选按钮单独重置高度样式，覆盖全局设置就可以了：

.userRating {
  height: auto; /* 重置为控件默认高度 */
  /* 也可以根据需求补充垂直对齐设置，比如：
  vertical-align: middle;
  */
}

调整之后，单选按钮就能和旁边的文本正常对齐了。

内容的提问来源于stack exchange，提问作者Arsalan Khattak