不能只设input为inline-block，因其是替换元素、无内容高度、vertical-align基准不可控，易导致错位和点击困难；应使用label包裹并设inline-block或flex容器统一控制布局与对齐。
radio单选框横向排列为什么不能只设 input 为 inline-block
因为 input[type="radio"] 是替换元素，自身没有内容高度，vertical-align 的基准不可控；单独给它加 display: inline-block 后，会和相邻文字或 label 文本严重错位——尤其在中文环境或不同字体下，常表现为悬空、下沉或左右间距忽大忽小。更麻烦的是，点击区域只剩 tiny 圆点，用户实际很难点中。
最稳妥的行内布局方案：用 label 包裹 + inline-block
结构必须是 <label><input type="radio" name="xxx">选项文本</label>，然后对 label 设置样式：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
label设display: inline-block，并统一加vertical-align: middle - 同时给
label加cursor: pointer和足够padding（如padding: 4px 12px），扩大可点击区域 - HTML 源码中所有
label必须写在同一行，或父容器设font-size: 0再单独给label设回正常字号，否则标签间空格会被渲染成间隙 - 避免用
float: left：它会让父容器塌陷，且无法用vertical-align微调对齐
现代项目首选：flex 容器控制整体流向
把整组单选按钮包进一个语义化容器（如 <div class="radio-group"> 或 <code><fieldset></fieldset>），再用 Flex 控制子项排列：
- 容器设
display: flex、flex-wrap: wrap（防小屏溢出）、gap: 8px（比margin更干净） - 每个
label必须完整包裹input，且带for/id关联，否则无障碍阅读器无法识别 - 加
align-items: center彻底解决文字对齐问题——它不依赖 baseline，不受字体影响 - 若需响应式：默认
flex-direction: column，中大屏媒体查询里切为row
容易被忽略的兼容性与可访问性细节
横向排列不是纯视觉问题，几个关键点常被跳过：
立即学习“前端免费学习笔记（深入）”；
-
name属性必须完全一致，否则互斥逻辑失效，用户能同时选多个 - 不要隐藏
input后忘了用label的for属性或显式包裹，否则屏幕阅读器读不出选项 - Safari 对
gap在 flex 容器中的支持有历史 bug（尤其旧版），如需兼容 iOS 12–14，可降级用margin-right配合:not(:last-child) - Grid 布局虽能等宽，但 IE11 不支持
repeat(4, 1fr)，且 Safari 旧版对min-width: 0处理异常，不建议在需要兜底的项目中强行上 Grid
