单选按钮与对应文本无法垂直对齐的技术求助

核心问题分析 #

1. HTML结构不规范：将所有单选按钮和文本嵌套在单个<label>中，语义错误且不利于对齐控制；<input>是自闭合标签，无需</input>结尾。
2. 全局CSS污染：对所有input设置的margin: 5px 0 0 0会间接影响单选按钮的垂直位置，即使.inline类重置了margin，仍可能残留布局偏移。
3. vertical-align取值适配问题：middle在部分字体下会导致按钮与文本偏移，需调整更精准的对齐方式。

修改后的代码 #

HTML（语义化重构）

<fieldset>
  <legend>Would you recommend this website?</legend>
  <div class="radio-item">
    <input type="radio" name="radio" value="yes" class="inline" id="radio-yes" checked>
    <label for="radio-yes">Yes</label>
  </div>
  <div class="radio-item">
    <input type="radio" name="radio" value="no" class="inline" id="radio-no">
    <label for="radio-no">No</label>
  </div>
  <div class="radio-item">
    <input type="radio" name="radio" value="maybe" class="inline" id="radio-maybe">
    <label for="radio-maybe">Maybe</label>
  </div>
</fieldset>

CSS（精准控制对齐）

/* 仅对非单选按钮应用全局样式，避免污染 */
input:not(.inline) {
  margin: 5px 0 0 0;
  width: 100%;
  min-height: 1.3em;
}

.inline {
  width: unset;
  margin: 0 0.5em 0 0;
  /* 用text-bottom实现按钮与文本底部精准对齐，适配多数字体 */
  vertical-align: text-bottom;
}

/* 给每个选项添加容器，优化布局间距 */
.radio-item {
  margin: 4px 0;
}

额外优化提示 #

• 如果text-bottom仍有偏移，可尝试vertical-align: baseline，或给<label>添加line-height: 1.4来匹配按钮的垂直位置。
• 修正了原代码中的拼写错误：recommand → recommend。

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