Layui表格工具栏按钮默认居中且无间距，需用CSS重置text-align并添加margin或flex gap控制；推荐在done回调中注入外部样式，避免内联style失效。
工具栏按钮默认居中且无横向间距
layui 表格头部工具栏（toolbar）默认把所有按钮或 html 内容塞进一个 .layui-table-tool-self 容器，并设 text-align: center，既不提供按钮间 margin，也不暴露间距配置项。你写的多个 <button class="layui-btn"></button> 会紧挨着显示，视觉上“粘连”，不是 bug，是设计如此。
用 CSS 强制重置 text-align 并加 margin
最直接有效的方式是在表格渲染完成后，给工具栏容器设对齐方式，再给按钮加右外边距：
- 左对齐工具栏：加
.layui-table-tool .layui-table-tool-self { text-align: left !important; } - 右对齐更常用：改
text-align: right !important;（避免和搜索框、列筛选冲突） - 按钮间距统一用
.layui-table-tool .layui-table-tool-self .layui-btn { margin-right: 8px; }，末尾按钮清空 margin：.layui-table-tool .layui-table-tool-self .layui-btn:last-child { margin-right: 0; } - 必须加
!important，否则被 Layui 内联样式覆盖 - 样式要等
done回调里注入，或 DOM 加载后执行，不能写在toolbar字符串里
避免在 toolbar 字符串里写内联样式或 float
很多人试图在 toolbar: '<button style="margin-right:10px">导出</button><button>打印</button>' 里直接加 style，但这样容易失效，原因有三：
- Layui 2.8+ 对字符串型
toolbar做 XSS 过滤，部分属性可能被剥离 - 内联
margin-right会被后续渲染逻辑覆盖，尤其开启列筛选后容器重排 - 写
float: right或display: flex会破坏工具栏与搜索框的共存布局，导致换行或错位 - 正确做法是只写纯净 HTML：
toolbar: '<button class="layui-btn">新增</button><button class="layui-btn">批量删</button>'，其余靠外部 CSS 控制
动态按钮数下推荐用 flex 替代 margin
当工具栏按钮数量不固定（比如权限控制显隐），用 margin-right 容易漏掉末尾清理逻辑，此时建议用 flex 布局：
- 给自定义容器加 class：
toolbar: '<div class="my-toolbar"> <button>导出</button><button>导入</button> </div>' - CSS 写：
.my-toolbar { display: flex; justify-content: flex-end; gap: 8px; }（gap比margin更稳，无需处理 last-child） - 注意：Layui 3.x 仍兼容
gap，但老版本（≤2.7）需回退为margin+ JS 动态清理 - 别在
.layui-table-tool上直接设display: flex——它内部结构复杂，容易影响列筛选弹层定位
margin-right 就容易漏边、换行、点击错位。真正稳妥的做法，是把对齐和间距拆开：用 text-align 或 flex 控制整体流向，用 gap 或带 :last-child 的 margin 精确卡住间隙，而不是靠猜或试。 
