单选框纵向排列应设label为display: block或用flex-direction: column容器，而非给input设display: block——否则按钮与文字错位、点击区域失效、可访问性受损且响应式崩溃。
单选框纵向排列不是靠给 <input type="radio"> 加 display: block，而是控制 <label></label> 的显示行为或用容器约束布局流——否则文字错位、语义断裂、响应式失效。
为什么直接给 input 设 display: block 会出问题
浏览器默认把 <input type="radio"> 当作行内替换元素，<label></label> 默认是块级；如果只对 <input> 设 display: block，它会独占一行，但关联的文本仍按行内规则渲染，结果就是按钮和文字上下错开、点击区域只剩按钮本身。
- 文字不随按钮一起换行，可点击区域大幅缩水
- 无法通过点击文字触发选择，损害可访问性
- 后续加样式（比如 hover、focus）时逻辑混乱
最稳妥：label 设为 display: block
把 <label></label> 当作布局单元，既保留语义，又自然实现“每组独占一行”：
<label style="display: block;"> <input type="radio" name="mode" value="auto"> 自动模式 </label> <label style="display: block;"> <input type="radio" name="mode" value="manual"> 手动模式 </label>
- 所有
<input>必须共用相同的name值，否则互斥失效 -
display: block写在<label></label>上，不是<input>或外层<div> <li>兼容 IE9+，无 flex gap 兼容性负担</li> <h3>现代方案：flex 容器 + gap 控制间距</h3> <p>适合需要精确对齐、动态插入或统一间距的场景，但要注意旧版 Safari 对 <code>gap支持有限：立即学习“前端免费学习笔记（深入）”；
<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并确保最后一项不额外加
别用
强制换行虽然能“看起来”换行，但这是语义错误，且破坏响应式：
-
<br>是内容级换行符，不是布局工具，HTML 结构变得不可预测 - 小屏幕下文字变宽，可能又挤回同一行，导致布局坍缩
- 增删选项时需同步调整
<br>数量，极易漏掉或多余 - 无障碍阅读器可能误读换行符为内容中断，影响 screen reader 流畅性
真正关键的不是“怎么让它换行”，而是“怎么让每个选项成为独立、可点击、语义完整、响应安全的布局单元”——这决定了后续加自定义样式、JS 交互或适配移动端时是否踩坑。
- 必须显式写
