layui单选框如何实现垂直排列-Layui教程-PHP中文网

layui radio 默认水平排列，需用css控制垂直布局：对普通列用templet包裹label并设display:block，对fixed列需单独加样式，同时确保name统一、事件监听正常。

layui单选框如何实现垂直排列

layui radio 列默认是水平排列，没法直接改

Layui 的 type: 'radio' 列默认把所有选项渲染成一行内联元素，没有内置配置项控制方向。这不是 bug，而是设计如此——它只负责生成单选按钮 + 标签的行内结构，布局交给 CSS 控制。

用 CSS 强制 radio 项垂直堆叠

最直接有效的办法是在 radio 列的 templet 或全局样式中，把容器设为 display: block，再让每个选项独占一行：

如果只影响某列，在 cols 中加 templet：

{ field: 'status', title: '状态', type: 'radio', templet: function(d) { return '<div style="display:block">
<input type="radio" name="status_' + d.layId + '" value="' + d.status + '"> ' + d.statusName + '</div>'; } }

如果整张表都要改，加全局样式：
```
.layui-table tbody .layui-form-radio { display: block; margin: 4px 0; }
```
注意：必须带 tbody 前缀，否则可能被 layui 内联样式覆盖
别碰 .layui-form-radio * { display: block } —— 这会破坏 radio 按钮和文字的基线对齐，导致图标悬浮或下沉

radio 垂直排列后点击区域变小，要手动扩大

原生 radio 的可点击区域极小，垂直排列后用户容易点不中。必须给每项加 padding 或包裹一层 label：

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

推荐用 label 包裹（语义正确、点击体验好）：

<label><input type="radio" name="x" value="1"> 选项一</label>

如果用 templet 动态生成，确保 name 值统一（同一组 radio 必须同名），且不要漏掉 value
避免用 onclick 绑定事件替代原生 click —— 这会导致 Layui 的 table.on('radio(filter)') 监听失效

垂直 radio 和表格固定列（fixed）一起用容易错位

当 radio 列设为 fixed: 'left' 时，Layui 会把它抽离到独立的 DOM 结构里，此时上面写的 .layui-table tbody .layui-form-radio 选择器就匹配不到 —— 因为 fixed 列不在 tbody 里。

解决办法：单独给 fixed 列加样式：

.layui-table-fixed-l .layui-form-radio { display: block; margin: 4px 0; }

更稳妥的做法是统一在 cellStyle 里控制：
```
cellStyle: function() { return { 'padding': '6px 0' }; }
```
再配合 templet 里的 label 结构，绕过选择器定位问题
测试时务必在不同分辨率下检查 fixed 区域是否随内容高度自适应——vertical-align 失效常在这里最先暴露

真正麻烦的不是怎么排成一列，而是你得确认当前 radio 是由 table 自动渲染的，还是你用 templet 手动拼的；前者能触发 radio(filter) 事件，后者得自己绑定 change 并调 table.setRowChecked 同步状态。