单选框纵向排列应设label为display: block或用flex-direction: column容器，而非给input设display: block——否则按钮与文字错位、点击区域失效、可访问性受损且响应式崩溃。

单选框纵向排列不是靠给 加 display: block，而是控制 的显示行为或用容器约束布局流——否则文字错位、语义断裂、响应式失效。

为什么直接给 input 设 display: block 会出问题

浏览器默认把 当作行内替换元素， 默认是块级；如果只对 设 display: block，它会独占一行，但关联的文本仍按行内规则渲染，结果就是按钮和文字上下错开、点击区域只剩按钮本身。

• 文字不随按钮一起换行，可点击区域大幅缩水
• 无法通过点击文字触发选择，损害可访问性
• 后续加样式（比如 hover、focus）时逻辑混乱

最稳妥：label 设为 display: block

把 当作布局单元，既保留语义，又自然实现“每组独占一行”：

<label style="display: block;">
  <input type="radio" name="mode" value="auto"> 自动模式
</label>
<label style="display: block;">
  <input type="radio" name="mode" value="manual"> 手动模式
</label>

• 所有 必须共用相同的 name 值，否则互斥失效
• display: block 写在 上，不是 或外层
• 兼容 IE9+，无 flex gap 兼容性负担

现代方案：flex 容器 + gap 控制间距

适合需要精确对齐、动态插入或统一间距的场景，但要注意旧版 Safari 对 gap 支持有限：


使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审
使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。
下载

<div style="display: flex; flex-direction: column; gap: 8px;">
  <label><input type="radio" name="size" value="s"> 小</label>
  <label><input type="radio" name="size" value="m"> 中</label>
  <label><input type="radio" name="size" value="l"> 大</label>
</div>

• 必须显式写 flex-direction: column，否则默认横向排布
• gap 比 margin-bottom 更可靠，避免外边距合并
• iOS 14.5 以下 Safari 不支持 gap，可降级为 margin-bottom: 8px 并确保最后一项不额外加

别用
强制换行

虽然能“看起来”换行，但这是语义错误，且破坏响应式：

• 
是内容级换行符，不是布局工具，HTML 结构变得不可预测
• 小屏幕下文字变宽，可能又挤回同一行，导致布局坍缩
• 增删选项时需同步调整
数量，极易漏掉或多余
• 无障碍阅读器可能误读换行符为内容中断，影响 screen reader 流畅性

真正关键的不是“怎么让它换行”，而是“怎么让每个选项成为独立、可点击、语义完整、响应安全的布局单元”——这决定了后续加自定义样式、JS 交互或适配移动端时是否踩坑。