推荐使用 display: flex 布局：将单选按钮组父容器设为 display: flex、flex-wrap: wrap，并用 gap 控制间距；每个选项用 label 包裹 input，确保可访问性与对齐稳定。
单选按钮组默认是垂直堆叠的，怎么改成横向排列
浏览器原生 <input type="radio"> 默认按块级元素渲染，相邻标签会换行。要横向排列，核心是让每个选项容器（通常是 <label> 或 <div>）变成行内或弹性布局元素。
最稳妥的做法是给包裹每个单选按钮的容器加 display: inline-flex 或 display: inline-block，而不是直接对 <input> 设置 display —— 因为它本身是替换元素，直接改 display 容易破坏可访问性与点击热区。
- 推荐用
<label>包裹<input>，再对<label>设置display: inline-flex; align-items: center; - 避免只给
<input>加float: left：浮动会脱离文档流，后续元素可能塌陷，且需额外清除浮动 - 不要依赖
white-space: nowrap在父容器上强行压成一行：当选项多、容器窄时会溢出不可控
横向排列后按钮和文字太挤，怎么加间距
单选按钮与关联文字之间、以及各选项之间都需要合理留白。关键在于区分两类间距：按钮与文字间的间隙（靠 gap 或 margin 控制），以及选项之间的间隔（靠容器子项的 margin-right 或 gap）。
如果用了 display: inline-flex 包裹每个 <label>，建议用 gap: 8px 控制内部按钮与文字距离；选项之间则统一在父容器上设 gap: 12px（配合 display: flex），比逐个写 margin-right 更干净、无最后一个多余间距问题。
立即学习“前端免费学习笔记（深入）”；
- 父容器用
display: flex; flex-wrap: wrap; gap: 12px;，能自动处理换行和间距一致性 - 慎用
margin-right给每个<label>：最后一个元素会多出右侧空白，需要额外 :last-child 处理 - 文字和按钮间不要仅靠空格或
移动端小屏下横向排列撑出滚动条，怎么自适应换行
固定横向排列在手机上大概率导致内容溢出，触发横向滚动条。这不是 bug，而是布局没适配视口宽度。解决思路不是禁止滚动，而是让选项主动折行。
关键在父容器的 flex 设置：去掉 white-space: nowrap（如有），确保 flex-wrap: wrap 生效，并给每个选项容器设最大宽度（如 flex: 0 1 auto 或 max-width: 120px），避免单个选项过宽卡住换行。
- 父容器必须设
display: flex; flex-wrap: wrap;，否则即使有空间也不会折行 - 每个
<label>加flex: 0 1 fit-content;或min-width: max-content;，防止被过度压缩导致文字换行错乱 - 避免对整个组设
width: 100vw：这会让 flex 项误判可用空间，反而阻碍换行
用 JavaScript 动态生成单选按钮组时，样式失效怎么办
动态插入的 DOM 节点不会自动继承 CSS 规则，但真正常见问题是：JS 插入的是纯 <input> 标签，没套 <label>，或者 class 名写错、漏了父容器的 flex 类名。
检查三处：是否所有单选按钮都正确包裹在 <label> 中；父容器是否在 JS 插入后仍保有 class="radio-group" 这类用于控制 flex 的类；CSS 选择器是否用了属性选择器（如 input[type="radio"]）却忘了新节点没加对应属性。
- JS 创建时务必用
document.createElement('label')包裹，再 appendinput和文本节点 - 不要依赖 CSS 用
:nth-child()精确控制第几个按钮样式——动态插入后序号会变，改用 class 控制更稳 - 插入后可临时加
console.log(parentElement.innerHTML)看结构，常发现少了闭合标签或属性拼写错误（比如type="radion"）
<label> 关联，屏幕阅读器可能无法正确播报选项；还有 flex 换行时若未设 align-content: flex-start，多行情况下第二行可能上浮不对齐。这些不报错，但影响真实用户使用。 
