单选控件需用CSS（如Flexbox或Grid）实现多行多列布局，因HTML原生不支持；fieldset仅语义容器，无栅格功能；须兼顾响应式、可访问性与IE兼容性。
单选控件（）本身不支持原生多行多列布局，必须靠 CSS 控制排列，不能依赖 HTML 结构“自动换行”或“分列”。
为什么
很多人以为把多个 塞进 就能天然分列，其实不然。浏览器只按文档流顺序渲染， 只是语义容器，不带任何栅格逻辑。若不加 CSS，所有单选框会默认堆成一列（块级表现）或挤成一行（内联表现但易折断），且无法控制列数、对齐或响应式断点。
- 不设
display时，默认块级，每组占满一行 - 仅用
float: left会导致父容器高度塌陷，需额外clear或overflow - 用
inline-block易受空格/换行符影响，列宽难精确控制
用 Flexbox 实现可控的多行多列排版
Flexbox 是目前最可靠、语义清晰、响应式友好的方案。关键在于：把每组 示例片段： Grid 更适合需要严格列数（如始终 4 列）、内容数量不确定的场景。它不依赖内容顺序，也不需要手动算宽度。 常见翻车点： 多列单选在小屏上极易拥挤、误触，而屏幕阅读器对视觉分列无感知——它仍按 DOM 顺序读取，所以“视觉上两行” ≠ “逻辑上两组”。 真正麻烦的从来不是“怎么排成多列”，而是“怎么让多列在不同设备上都可操作、可理解、不崩”。别为了视觉整齐牺牲语义和可用性。+ 包进一个
display: flex + flex-wrap: wrap，允许换行）设 flex: 1 1 calc(33.333% - 8px)，实现三列等宽（减去 gap）gap: 8px 替代 margin，避免父子 margin 合并问题 和文字在 label 内正确绑定（for 或嵌套写法）<div class="radio-grid">
<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>
<label><input type="radio" name="size" value="xl"> XL</label>
</div>
<p><style>
.radio-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.radio-grid label {
flex: 1 1 calc(50% - 8px); /<em> 两列 /
min-width: 120px;
}
</style></p>
用 Grid 实现固定列数 + 自动行数
display: grid + grid-template-columns: repeat(4, 1fr)
gap 控制间距，比 float/flex 更稳定minmax() 可实现“至少 120px，最多均分”：grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))))
设 display: contents 或 display: block，导致 grid item 不生效 内混用 box-sizing: border-box，padding 导致列宽溢出移动端适配与可访问性容易被忽略的点
@media (max-width: 480px) { .radio-grid { grid-template-columns: 1fr; } }
必须包裹 或用 for 显式关联，否则语音朗读可能漏掉值user-select: none 或 -webkit-tap-highlight-color: transparent 过度优化，会导致 iOS 点击反馈消失visibility: hidden 隐藏未选中项——它仍被读屏器读取；应结合 aria-hidden="true" 或彻底移除 DOM
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
