radio单选按钮与关联文本对齐问题：ul结构下排版异常优化求助

先修复引发布局错位的核心结构问题 #

你当前的代码存在两处违背HTML渲染规则的问题，是导致对齐错位的根源，这类问题不需要一开始就靠绝对定位破坏文档流解决：

• <ul>元素的直接子节点仅允许是<li>，你现在直接把<label>、<input>作为ul的子元素，还把<li>嵌套在label内部，浏览器遇到这类违规嵌套时会自动重排修正DOM树，直接打乱默认排版流，是错位的最初诱因
• 你把单选input和关联文本拆成了两个独立的流内元素，两者的默认垂直对齐基线、默认外边距规则不统一，自然会出现垂直错位

先把结构调整为完全符合嵌套规范的形式：

<ul class="freight-option-list">
  <li class="freight-option-item">
    <label class="radio-label" for="${response[i].name}">
      <input 
        class="radio-input" 
        type="radio" 
        id="${response[i].name}" 
        name="drone" 
        value="${response[i].name}-radio-value"
      >
      <span class="freight-info">
        <span>${freightName}:</span> ${response[i].price},-
      </span>
    </label>
  </li>
</ul>

调整后，整个DOM结构完全符合HTML嵌套规则，从根源上避免了浏览器自动修正结构带来的排版混乱。

无需绝对定位的对齐排版实现 #

调整好结构后，直接用Flex弹性布局完成对齐，全程不破坏正常文档流，后续调整垂直间距非常方便，完全不会出现之前用absolute定位导致的间距失控问题。
可以参考下面的样式代码直接复用：

.freight-option-list {
  /* 重置ul默认的列表符号、内边距外边距 */
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px; /* 直接统一控制每个选项的垂直间距，不需要逐元素调margin */
}

.freight-option-item .radio-label {
  /* 让label内部的单选框和文本沿垂直中线对齐 */
  display: flex;
  align-items: center;
  gap: 8px; /* 控制单选框和文本的水平间距 */
  cursor: pointer;
  padding: 8px 12px;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
}

.radio-input {
  /* 重置input默认外边距，避免破坏Flex对齐基线 */
  margin: 0;
  width: 16px;
  height: 16px;
  flex-shrink: 0; /* 防止窄容器下单选框被Flex压缩变形 */
}

常见踩坑提醒 #

• 布局过程中尽量少用绝对定位调整普通表单元素的位置，这类脱离文档流的元素会导致后续兄弟元素的间距计算完全脱节，维护成本极高
• 把input单选框包进对应的label内部后，用户点击关联文本区域也能触发单选选中，不需要额外写JS绑定点击事件
• 如果遇到个别浏览器下单选框的基线偏移问题，直接在input上补充vertical-align: middle即可消除，不需要手动写像素级的偏移计算

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