单选按钮横向排列需用label包裹input并设置label的display为inline-block或flex，而非直接样式化input；浮动方案需清除父容器塌陷，flex方案推荐gap控制间距并确保可访问性。
单选按钮横向排列时 label 和 input 的包裹关系必须理清
直接对 <input type="radio"> 设置 float: left 或 display: flex 是无效的——浏览器会忽略对替换元素（如 radio）的宽高、浮动、弹性布局等样式。真正要控制布局的是它的容器，通常是 <label></label> 或自定义的 <div>。<p>常见错误是把多个 <code><input> 丢在一行却没包 <label></label>，或用 <label></label> 包了但没设 display，结果仍是垂直堆叠。
- 推荐结构：每个单选选项用一个
<label></label>包裹<input>+ 文字，语义正确且点击区域更大 -
<label></label>默认是 inline 元素，所以需显式设为display: inline-block（浮动方案）或display: flex（弹性盒方案）才能统一控制排列 - 避免用
<span></span>或纯<input>堆砌——可访问性差，且 iOS Safari 对无<label></label>的 radio 点击响应不稳
用 float 实现横向排列的实操要点
浮动方案兼容性好（IE8+），但需处理父容器塌陷和间隙问题。关键不是 float input，而是 float label。
<div class="radio-group"> <label><input type="radio" name="size" value="s"> S</label> <label><input type="radio" name="size" value="m"> M</label> <label><input type="radio" name="size" value="l"> L</label> </div>
- 给
<label></label>加float: left，并设margin-right控制间距（比如8px） - 给父容器
.radio-group加overflow: hidden或::after清除浮动，否则高度塌陷导致后续内容上移 - 注意：浮动后
<label></label>默认不换行，但若文字过长可能折行——加white-space: nowrap更稳妥 - 移动端慎用：float 在小屏下容易挤出父容器，建议配合
max-width: 100%和box-sizing: border-box
用 flex 实现横向排列的现代写法
弹性盒更可控，但需注意 <label></label> 必须是 flex 项目的直接子元素，不能让 <input> 自己当 flex 项。
.radio-group {
display: flex;
gap: 12px; /* 推荐用 gap，比 margin 更干净 */
}
.radio-group label {
display: flex;
align-items: center; /* 垂直居中对齐文字和圆点 */
cursor: pointer;
}
-
gap是首选间距控制方式，避免手动算margin；不支持 IE，可用margin-right回退 - 给
label设display: flex后，<input>和文字自动水平排列，无需额外定位 - 若需限制最大宽度（比如防止文字撑开），对
label设flex-shrink: 0或min-width: max-content - 注意 Safari 旧版本对
gap支持不全，可加flex-wrap: wrap配合媒体查询应对窄屏
横向排列时容易被忽略的细节
布局能排开只是第一步，实际项目里常因这些细节翻车：
- 未设置
name属性：多个 radio 必须同名才能互斥，否则变成独立开关 - 未设
id+for：虽然<label></label>包裹<input>可点击，但屏幕阅读器更依赖显式关联 - 禁用状态样式缺失：
input:disabled + label或label:has(input:disabled)（后者需现代浏览器）需单独定义灰阶和cursor: not-allowed - 键盘导航失效：确保 tab 键能顺序聚焦每个 radio，且
Space可选中——这依赖正确的 DOM 结构和tabindex（通常不用设，默认即可）
横向排列本身很简单，但把语义、可访问性、响应式和禁用态都兜住，才是上线前真正要验的点。
