如何修复HTML中radio buttons与相邻文本不对齐的问题

单选框与相邻文本对齐修复方案 #

出现错位的核心原因是单选框作为行内块元素，默认vertical-align属性值为baseline，和相邻文本的基线位置不匹配，导致视觉上不对齐。

方案1：不改动现有HTML，仅加CSS修复 #

将以下样式添加到你的样式表中即可：

.cart-attribute__field input[type="radio"] {
  vertical-align: middle;
  margin-right: 4px;
}
.cart-attribute__field input[type="radio"] + span {
  vertical-align: middle;
}

如果还有细微偏移，可以给单选框加margin-top: -1px到-3px的负边距，适配你当前页面的字体大小和行高。

方案2：优化HTML结构（更规范，支持点击文字选中单选框） #

修改后的HTML代码如下：

<p class="cart-attribute__field">
  <label>Izberi katero obliko želiš:</label><br>
  <label class="radio-option">
    <input required class="required" type="radio" name="attributes[Izberi katero obliko želiš]" value="1"{% if cart.attributes["Izberi katero obliko želiš"] == "1" %} checked{% endif %}>
    <span>1</span>
  </label><br>
  <label class="radio-option">
    <input required class="required" type="radio" name="attributes[Izberi katero obliko želiš]" value="2"{% if cart.attributes["Izberi katero obliko želiš"] == "2" %} checked{% endif %}>
    <span>2</span>
  </label><br>
  <label class="radio-option">
    <input required class="required" type="radio" name="attributes[Izberi katero obliko želiš]" value="3"{% if cart.attributes["Izberi katero obliko želiš"] == "3" %} checked{% endif %}>
    <span>3</span>
  </label><br>
</p>

搭配对应CSS样式：

.radio-option {
  display: block;
  margin: 6px 0;
  cursor: pointer;
}
.radio-option input[type="radio"] {
  vertical-align: middle;
  margin-right: 6px;
}
.radio-option span {
  vertical-align: middle;
}

第二种方案同时优化了可访问性，用户点击对应文字就能选中单选框，使用体验更好。

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