单选按钮纵向排列应设label为display: block，确保input被label正确包裹并绑定for/id，避免仅作用于input导致文字错位；flex/grid方案易引发兼容性与可访问性问题，非必要不推荐。
单选按钮默认是横向排列的，怎么改成纵向？
HTML 单选按钮（<input type="radio">）本身没有“排列方向”属性，它默认按文档流 inline 排列，看起来像横着的。真正控制纵向显示的是 CSS 布局方式——不是改 HTML 标签，而是让每个 label 或 input 占据整行或强制换行。
用 display: block 是最直接有效的方法
给包裹单选按钮的 label（推荐写法）或单独的 input 设置 display: block，就能让它独占一行，自然纵向排列：
<label style="display: block;"> <input type="radio" name="theme" value="light"> 浅色模式 </label> <label style="display: block;"> <input type="radio" name="theme" value="dark"> 深色模式 </label>
- 必须作用在
label或包含input的容器上，只设在input上会导致文字不跟随换行 - 避免对
input单独设display: block后文字仍在原位置（脱离流），此时需额外处理文字定位 - 如果用 CSS 类，推荐统一加在
label上，语义和样式都更可控
用 flex 或 grid 容器也能实现，但有隐藏风险
把所有选项包进一个 div，再用 flex-direction: column 或 grid-template-rows 控制方向，看似高级，实际容易出问题：
-
flex容器下，若未重置label的默认display，部分浏览器可能仍让内容内联，导致错位 - 屏幕阅读器对嵌套过深的 flex/grid 结构兼容性略差，影响可访问性
- 移动端小屏时，
flex容器若没设width: 100%，可能意外撑宽父容器 - 除非已有布局强依赖 flex/grid，否则没必要为单纯纵向排列引入额外复杂度
别忽略 label 和 input 的绑定关系
纵向排列后，点击文字不能选中按钮，大概率是 for 和 id 没配对，或者用了无文本的 label 包裹写法但遗漏了 input：
- 正确绑定示例：
<label for="opt1"><input type="radio" id="opt1" name="x">选项一</label> - 如果用包裹式写法（推荐），确保
input确实在label标签内部，且没被其他标签意外截断 - 某些 CSS 重置库（如 normalize.css）会移除
label的默认光标样式，记得补上cursor: pointer提升点击感知
纵向排列本身很简单，真正的麻烦往往出在绑定失效、CSS 泄漏或可访问性缺失上——多检查两遍 for/id 和包裹结构，比调布局更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
