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