layui table 头部工具栏默认居中，需用 CSS 强制覆盖 .layui-table-tool .layui-table-tool-temp 和 .layui-table-tool-self 的 text-align 并加 !important；或设 toolbar: false 自定义工具栏。
layui table 头部工具栏默认居中，怎么改对齐方式
layui 的 toolbar 配置项默认把工具栏内容渲染在表头右侧、且内部用 text-align: center 包裹，所以无论你写什么按钮或 html，都会被强行居中——这不是 bug，是 layui 2.8.x 及之前版本的固定样式逻辑。
想左对齐或右对齐，不能只靠配置项，得动 CSS 或 DOM 结构。
用 CSS 强制覆盖 toolbar 容器的 text-align
layui 渲染完表格后，会在表头右侧插入一个 class 为 layui-table-tool 的容器，里面再套一层 layui-table-tool-self（自定义 toolbar）或 layui-table-tool-temp（内置 toolbar）。它的父级默认带 text-align: center。
直接加样式最稳：
/* 左对齐 */
.layui-table-tool .layui-table-tool-temp,
.layui-table-tool .layui-table-tool-self {
text-align: left !important;
}
<p>/<em> 右对齐（更常用） </em>/
.layui-table-tool .layui-table-tool-temp,
.layui-table-tool .layui-table-tool-self {
text-align: right !important;
}- 必须加
!important，否则被 layui 内联样式盖掉 - 别只写
.layui-table-tool-self，因为带搜索/列筛选的 toolbar 会走layui-table-tool-temp - 样式要等 table 渲染完再注入，比如放在
done回调里或 DOM 加载后执行
toolbar 配置值里写 HTML 时注意内联样式干扰
如果你用字符串形式写 toolbar，比如：toolbar: '<button class="layui-btn">导出</button>'，按钮本身没 float 或 margin，光靠父容器 text-align 对齐就行。但一旦加了 style="float: right" 或 display: flex，反而容易和 layui 的布局冲突，导致换行、错位或点击失效。
- 避免在 toolbar 字符串里写
float、position: absolute这类脱离文档流的样式 - 如果真要用 flex 布局控制子元素间距，只在自定义容器内做，比如：
toolbar: '<div class="my-toolbar"><button>新增</button><button>批量删</button></div>'，然后单独给.my-toolbar设display: flex; justify-content: flex-end; - layui 2.8+ 对 toolbar 字符串做了 XSS 过滤，
<script>标签会被清空，别指望在里面塞 JS
用 toolbar: true + 自己画工具栏，彻底绕过 layui 的对齐限制
这是最干净的方案：关掉 layui 自动生成的 toolbar 容器，自己在 table 上方或下方放一个独立 div，用原生 HTML + CSS 控制对齐，再手动绑定事件。
- table 初始化时设
toolbar: false（不是null或空字符串） - 在
<table>标签上方加一层<div class="table-header-bar"></div> - 用
table.on('tool(<id>)', ...)监听行内操作，用普通 jQuery / 原生addEventListener绑定顶部按钮 - 这样完全不受
layui-table-tool样式影响，对齐、间距、响应式都由你掌控
复杂点在于事件解耦：你要自己维护「选中行数据」状态，不然“批量操作”按钮点下去不知道该处理哪些行。
