radio小屏竖排、大屏横排需用媒体查询配合flex布局：给父容器设display: flex和flex-direction: column，默认竖排；在@media (min-width: 768px)中改为flex-direction: row并加flex-wrap: wrap和gap控制间距，同时用label包裹radio确保绑定与对齐。
radio在小屏幕下堆叠显示但大屏要横排，怎么用CSS控制
直接用媒体查询配合 flex 布局最稳，别碰 float 或 inline-block —— 后者在不同浏览器里对换行、间距的处理太不一致。
关键不是“让radio横排”，而是“让包裹它们的容器决定子项排列方向”：
- 给所有
<input type="radio">的父容器（比如<div class="radio-group">）设 <code>display: flex - 默认设
flex-direction: column（小屏竖排） - 在
@media (min-width: 768px)里改成flex-direction: row - 加
flex-wrap: wrap防止超宽，再用gap控制间距（比margin更干净）
为什么用label包裹radio比分开写更可靠
很多排列错乱其实源于HTML结构松散。单独写 <input> 和 <label></label> 容易因换行、空格或CSS重置导致对齐偏移；而 <label><input>选项文本</label> 能保证点击区域和控件绑定、渲染盒模型统一。
示例结构：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
<div class="radio-group"> <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>
这样后续只需对 .radio-group label 设样式，不用单独处理 input 的宽高/垂直对齐。
移动端点击区域太小，光调排列不够
横排后如果用户手指点不准，本质是可点击区域不足。不要只改 input 的 width/height —— 这会破坏原生样式且难兼容。
- 给
label设最小尺寸：min-width: 80px; min-height: 44px（iOS推荐触控最小值） - 用
display: flex; align-items: center让文字和 radio 垂直居中 - 避免用
padding撑开input自身，它可能触发 Safari 的缩放行为 - 必要时加
touch-action: manipulation提升响应速度
IE11下flex失效怎么办
如果还必须支持 IE11，flex-direction 的媒体查询降级方案要提前想好：
- 放弃动态切换，用两个独立容器：
<div class="radio-group--vertical"> 和 <code><div class="radio-group--horizontal">，靠 <code>@supports (display: flex)或 JS 特性检测切换显隐 - 或者退回到
display: table-cell+white-space: nowrap实现横排，但需手动清除单元格间隙 - 绝对别用
display: inline加margin模拟——IE11 对input[type=radio]的行内基线计算极不稳定
真正麻烦的不是怎么排，而是 radio 的视觉状态（选中/禁用/焦点）在不同分辨率下是否保持一致。这些状态样式得单独测试，尤其 :checked + label 这类组合选择器在 flex 容器里容易失效。
