layui单选框无内置间距配置,需通过layui-row的layui-col-space类配合layui-col-md列容器实现横向间距,或为父元素添加margin控制;form模块不支持gap等布局参数。

layui 单选框本身不支持直接设置间距
单选框(radio)在 Layui 中是通过 form.render('radio') 渲染的表单元素,它没有内置的「间距类」或配置项。你看到的“间距”其实是靠外层容器、CSS 或栅格布局间接实现的,不是单选框组件自身的属性。
用 layui-col-* 布局控制单选框横向间距
这是最常用也最稳妥的方式:把每个 radio 包进独立的列里,用 Layui 栅格的列间距类(layui-col-space*)来控制整体间距。
-
layui-col-space5表示列之间留出 5px 空隙(支持 1–32) - 必须把
layui-col-space*加在layui-row上,而不是单个radio或label - 每个
radio需包裹在layui-col-md*内(如layui-col-md3),否则列间距无效 - 注意:
layui-col-space*只作用于相邻列之间的 margin,最左/最右列无额外边距
<div class="layui-row layui-col-space10">
<div class="layui-col-md3">
<input type="radio" name="type" value="1" title="选项一">
</div>
<div class="layui-col-md3">
<input type="radio" name="type" value="2" title="选项二">
</div>
<div class="layui-col-md3">
<input type="radio" name="type" value="3" title="选项三">
</div>
</div>
用 CSS 调整单个 radio 的左右外边距
如果只是微调某几个单选框的间距,或者不想改布局结构,可以直接加内联样式或自定义 class:
- 给
input[type="radio"]加margin-right: 12px,但要注意它会影响所有同名name的单选框 - 更推荐给包裹它的
label或父div加margin-right,避免影响复选框渲染逻辑 - 不要用
padding替代margin—— padding 会撑大点击热区,还可能和 Layui 默认的layui-form-radio样式冲突 - 若使用了
form.render(),自定义 margin 不会被重置,可放心使用
为什么不能用 form.item 或 form.radio 设置间距?
Layui 的 form 模块没有提供类似 space、gap 这样的参数。它的渲染逻辑只负责将原生 radio 替换为带图标的 UI 组件,并绑定事件,不干预布局间距。
试图用 form.on('radio(*)', ...) 动态加样式,或在 templet 里写空格/换行,都会破坏表单校验、禁用状态同步、甚至导致 form.val() 读不到值——这些是真实项目里踩过的坑。
真正需要灵活间距时,优先走栅格;需要像素级控制时,用 margin + 父容器;别指望 form 模块替你管布局。











