按钮图标不显示或样式错乱需显式设置line-height:1;vertical-align:middle于<i>标签，禁用layui-btn-icon类；自定义图标应直接加在<button>上并用padding-left调间距，避免!important硬覆盖。
按钮图标不显示或样式错乱怎么办
layui 默认给 .layui-btn 设了固定 padding 和 height，如果你直接套用 <i class="iconfont"> 或自定义 class，很容易被覆盖。常见现象是图标挤成一团、文字换行、按钮高度塌陷。
- 必须显式重置
line-height和vertical-align，比如加style="line-height: 1; vertical-align: middle;"到<i>标签里 - 避免用
layui-btn-icon类——它只适配layui-icon，对第三方 iconfont 无效 - 如果用了自定义字体图标（如 iconfont），建议把图标 class 放在
<button>上，而不是嵌套的<i>，再配合padding-left调整间距 - 别用
!important硬覆盖，Layui 的 CSS 权重高，容易引发后续冲突
如何让操作列按钮统一尺寸且不随文字撑开
默认按钮宽度由文字长度决定，导致操作列参差不齐，尤其在“编辑”“删除”“详情”混排时特别明显。
- 给操作列所有按钮加统一 class，例如
btn-op，然后全局写 CSS：.btn-op { width: 32px; padding: 0 5px; text-align: center; } - 禁用按钮内联宽高，删掉
layui-btn-sm里的min-width干扰，改用固定width+overflow: hidden - 图标按钮建议只留图标，去掉文字；若需文字，统一用
title属性做 hover 提示，避免列宽波动 - 表格列配置中，
width设为固定值（如120），否则响应式下容易错位
点击后按钮状态变化失效或样式残留
比如点击“删除”后想变灰禁用，但 disabled 属性不起作用，或者 hover 效果一直挂着不消失。
- Layui 的
.layui-btn自带伪类样式，disabled不会自动生效，得手动加layui-btn-disabled类 - 禁用时记得同时移除
lay-event属性，否则事件仍可触发 - 不要用
onclick="xxx()"写内联事件——它绕过 Layui 事件代理，无法同步更新按钮状态 - 状态切换后，调用
table.reload('yourTableId')是重绘整表，太重；推荐直接 DOM 操作：btn.classList.add('layui-btn-disabled')
多按钮并排时换行或挤压“共 N 条”文字
操作列放三个以上按钮，尤其在小屏或窄列下，常出现按钮掉到第二行，甚至盖住分页栏的统计文案。
- 用
.layui-btn-group包裹多个按钮，它自带display: inline-flex和间隙控制 - 给操作列设置
white-space: nowrap，强制单行显示 - 表格整体加
overflow-x: auto（父容器），比强行缩按钮更稳妥 - 真要压缩空间，删掉按钮内文字，全用图标 +
title，再把font-size降到14px
