单选按钮横向排列应优先使用flex布局，父容器设display: flex并配合gap控制间距，label包裹input并设cursor: pointer；兼容ie11时可用inline-block+font-size: 0方案。
单选按钮默认是块级元素，怎么让它横着排
浏览器默认把 <input type="radio"> 渲染为行内替换元素，但配套的 <label></label> 通常被写成块级或带换行的结构，导致视觉上竖排。真正卡住横向布局的，往往不是 input 本身，而是包裹它的标签、父容器的 display 设置，或者 CSS 重置不彻底。
- 最直接有效的方式是给所有同组
label（推荐用label包裹input）设置display: inline-block或display: inline - 如果用了 Flex 布局，对父容器设
display: flex; flex-direction: row;更可控，且天然支持间距、对齐等 - 避免只对
input单独设display: inline—— 它会和文字挤在一起，label 文本可能错位或无法点击
用 Flex 实现响应式横向单选组（带间距和对齐）
Flex 是目前最稳妥的横向排列方案，尤其适合需要控制间距、居中、折行等场景。关键点在于：父容器设 flex，子项（每个 label）不额外设 display，靠 flex 自动处理流式布局。
<div class="radio-group"> <label><input type="radio" name="theme" value="light"> 明亮</label> <label><input type="radio" name="theme" value="dark"> 暗色</label> <label><input type="radio" name="theme" value="auto"> 自动</label> </div>
对应 CSS：
.radio-group {
display: flex;
gap: 1rem; /* 推荐用 gap 控制间距，比 margin 干净 */
align-items: center;
}
.radio-group label {
display: flex;
align-items: center;
gap: 0.5rem; /* input 和文字之间留空 */
cursor: pointer;
}
-
gap在现代浏览器中兼容性足够（Chrome 84+、Firefox 63+、Safari 14.1+），老版本可降级为margin-right配合:not(:last-child) - 务必给
label设cursor: pointer，否则用户可能意识不到可点击区域已扩大 - 不要给
input自己设宽高或vertical-align，容易破坏 baseline 对齐
IE11 兼容方案：inline-block + 白空间处理
如果必须支持 IE11，Flex 的 gap 不可用，align-items 行为也有差异。这时回归传统 inline-block 方案更稳，但要注意 HTML 中的换行符会被渲染为空格，造成意外间隙。
- 把所有
label写在同一行，或用注释消除空白：<label>...</label><!-- --><label>...</label> - 父容器设
font-size: 0，子项再把字号设回来，从根源上消灭空格宽度 - 每个
label设display: inline-block; vertical-align: middle;，确保基线对齐 - 用
margin-left替代gap控制间距，首项不加 margin
为什么不能只用 float 或 position 实现
float 会脱离文档流，父容器高度塌陷，必须额外清除浮动；position: absolute 则完全放弃流式布局能力，响应式、内容增减、无障碍访问都会出问题。
- 屏幕阅读器依赖 DOM 顺序和语义结构，float/absolute 可能打乱可访问性树
- 移动端横屏或缩放时，绝对定位元素容易溢出视口或重叠
- 维护成本高：每新增一个选项，都要手动调位置，没法复用样式
横向单选组看着简单，但真正在意可访问性、缩放适配、老浏览器兜底和后续扩展的人，几乎都会回到 label + flex 或 label + inline-block 这两条路。别为了省几行 CSS 去碰 float 或 absolute —— 后续调试花的时间远超初期多写的那点代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
