radio竖排需通过CSS控制布局：推荐为label设display: block；或用Flex布局，父容器设display: flex和flex-direction: column，并添加gap间距；同时注意扩大点击区域、设置cursor:pointer及正确语义化label包裹。
radio单选框默认是横排的，怎么让它竖着排？
HTML里<input type="radio">本身没有“竖排”属性，它默认和文字一样内联显示，所以多个radio挤在一行。想竖排，本质是让每个选项独占一行或强制换行——不是改radio，而是控制它的容器或兄弟元素布局。
最直接有效的方式是给每个label（推荐包裹radio的写法）设为块级元素：
<label><input type="radio" name="color" value="red"> 红色</label><br><label><input type="radio" name="color" value="blue"> 蓝色</label><br><label><input type="radio" name="color" value="green"> 绿色</label>
然后加一行CSS：
label { display: block; }
这样每个label自成一行，内部的radio自然竖向排列。别用br硬换行——语义不清、维护麻烦、响应式下容易错位。
立即学习“前端免费学习笔记（深入）”；
为什么不用float或inline-block？
老办法里有人对label设float: left再清浮动，或设display: inline-block加vertical-align，这些在现代项目里反而引入额外复杂度：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
float需要额外清浮动，否则父容器高度塌陷 -
inline-block元素间有空白字符（换行/空格）导致间隙，要删HTML空格或设font-size: 0，不直观 - 两者在Flex/Grid普及后都属于绕路方案，可读性和可维护性差
用Flex布局更灵活，但要注意flex-direction
如果父容器是div且需要统一控制（比如还要加间距、对齐），Flex是更现代的选择：
<div class="radio-group"><br> <label><input type="radio" name="size" value="s"> 小</label><br> <label><input type="radio" name="size" value="m"> 中</label><br> <label><input type="radio" name="size" value="l"> 大</label><br></div>
对应CSS：
.radio-group { display: flex; flex-direction: column; gap: 8px; }
关键点：
- 必须显式写
flex-direction: column，默认是row（横排） -
gap比margin更干净，避免首尾多出间距 - 不要对
label单独设flex，否则每个label自己变成flex容器，没意义
移动端适配时，别忘了点击区域和可访问性
竖排后看似整齐了，但容易忽略两个实际问题：
- 小屏幕下radio按钮本身很小，用户难点击 → 给
label设padding（比如padding: 6px 12px），扩大热区 - 没用
label包裹radio，或只用for/id关联，但没设cursor: pointer→ 用户看不出能点，建议统一加label { cursor: pointer; } - 屏幕阅读器依赖
label与radio的正确关联，所以永远优先用<label><input>文本</label>结构，而不是分离写法
竖排只是视觉调整，背后涉及交互习惯和辅助技术支持，漏掉任一环，用户实际体验就打折。
