layui单选框默认不在一行显示三个是因为其radio组件使用display:block的 layui-form-radio 包裹结构，每个选项独占一行；解决方法是将整组radio放入带layui-inline类的layui-form-item中，并确保标准结构。
layui 单选框默认为什么不在一行显示三个
因为 layui 的 radio 组件默认使用 display: block 的 .layui-form-radio 包裹结构，每个选项独占一行；即使你写成同一组 input[type=radio]，layui 渲染后也会把每个选项塞进独立的块级容器里。
用 layui-form-item + layui-inline 控制布局
最稳妥的做法不是改 CSS，而是利用 layui 内置的行内表单类。关键点是：把整组 radio 放进一个 layui-form-item，再给它加 layui-inline 类，同时确保每个 radio 项用 layui-form-radio 的标准结构（不能漏掉 layui-form-radio 的 span 包裹）。
示例 HTML：
<div class="layui-form-item layui-inline">
<label class="layui-form-label">选项</label>
<div class="layui-input-block">
<input type="radio" name="test" value="1" title="选项1" checked>
<input type="radio" name="test" value="2" title="选项2">
<input type="radio" name="test" value="3" title="选项3">
</div>
</div>
注意：layui-inline 必须加在 layui-form-item 上，而不是 layui-input-block；否则 label 和选项会错位或换行。
为什么不用直接写 CSS 强制 display: inline-block
手动给 .layui-form-radio 加 display: inline-block 看似简单，但容易出问题：
- 点击区域变小——原生 radio 的
label关联被破坏，只能点圆圈，不能点文字 - 垂直对齐错乱——不同字号/行高的文字 baseline 不一致，三个 radio 看起来高低不平
- 响应式失效——小屏下仍强行挤三列，可能溢出或重叠
- 与 layui 表单校验样式冲突，比如错误提示的
layui-form-danger可能无法正确撑开高度
如果必须动态控制数量（比如“每行显示 N 个”）
layui 没有内置分组栅格，得靠 JS 手动包裹。核心思路是：渲染完 radio 后，按每 3 个为一组，用 <div class="layui-inline"></div> 包一层，并移除原 layui-form-radio 的块级样式。
实操建议：
- 不要在
form.render()前操作 DOM，等渲染完成再处理 - 用
document.querySelectorAll('input[name="xxx"]')获取所有同名 radio - 遍历数组，每 3 个新建一个
div.layui-inline，把对应节点appendChild进去 - 别忘了给每个新 div 加
style="margin-right: 15px"保证间距，否则紧贴在一起
这种方案适合后台配置「每行显示数」的场景，但日常开发中，静态写 layui-inline 更轻量、更可控。
真正要注意的是：layui-inline 对 label 宽度敏感，如果 label 文字太长，哪怕加了 inline，radio 也可能被挤到下一行——这时得配合 layui-form-label 的宽度调整，或者干脆去掉 label，用文字说明代替。
