推荐使用 flex 布局实现单选按钮横向排列：将 fieldset 或容器设为 display: flex，配合 gap 和 align-items: center 精确控制间距与垂直对齐，同时确保 label 包裹 input 并设置 cursor: pointer 以保障可访问性。
input[type="radio"] 默认是内联元素，但浏览器会按块级语义渲染其周围空白，直接写在一行里仍可能换行或间距失控。横向排列的关键不是“让它变 inline”，而是统一控制容器流式行为和子项对齐方式。
用 display: inline-block 控制单选按钮组布局
给每个 input[type="radio"] 和对应 label 外层加一个包裹 span 或直接设 label 为 inline-block，是最轻量、兼容性最好的方案：
- 必须同时设置
input和label（或它们的父容器）为inline-block，否则vertical-align无效，容易上下错位 - HTML 源码中标签间的换行/空格会被渲染为空隙，建议把所有
label写在同一行，或在父容器上设font-size: 0，再单独给label设回正常字号 - 避免只对
input单独设inline-block：它本身无内容宽高，不设vertical-align: top/middle容易和文字基线对不齐
用 flex 布局更可控，但要注意表单语义
把 fieldset 或自定义容器设为 display: flex，子项自然横排，且能用 gap 精确控距：
-
flex-direction: row是默认值，不用显式写；但需注意flex-wrap: nowrap防止小屏下溢出 - 每个
label应完整包裹input，否则for/id关联失效，无障碍阅读器无法识别 - 若用
flex但未设align-items: center，input可能和文字顶部对齐，视觉上显得偏高
为什么不能只靠 float: left？
虽然历史项目里常见 float: left 做横向，但现在不推荐：
- 浮动元素脱离文档流，父容器高度塌陷，必须额外加
overflow: hidden或伪元素清除，增加维护成本 -
float对vertical-align无效，无法微调单选按钮与文字的垂直位置 - IE8+ 支持
inline-block，而flex在现代项目中已无兼容顾虑，float属于过时解法
实际代码片段对比
正确写法（推荐 flex）：
CSS：
.radio-group {
display: flex;
gap: 16px;
align-items: center;
}
.radio-group label {
display: flex;
align-items: center;
gap: 4px;
}
关键点：外层 flex 控制整体流向，内层 label 也用 flex 确保 input 和文字垂直居中，gap 替代魔数 margin。
最常被忽略的是：没给 label 设置 cursor: pointer，用户点文字区域无法触发选择——这属于可访问性硬伤，不是样式问题，而是功能缺失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
