layui分页按钮默认右对齐,无需额外设置;若未右对齐,常见原因是自定义CSS覆盖、layout配置缺失基础项、theme重写样式或父容器overflow隐藏裁剪;强制右对齐应使用btnalign: 'r'参数而非CSS。
layer.confirm 或 laypage 的分页按钮默认 btnalign: 'r'(右对齐),这是内置行为。如果你发现没右对齐,大概率是被自定义 CSS 覆盖了,或者用了非标准配置干扰了渲染逻辑。
不是 layui 没右对齐,而是某些操作意外破坏了默认布局:
.layui-laypage 或其子元素加了 text-align: left 或 flex-direction: row-reverse
layout 配置里漏掉了 'prev'、'next' 等基础项,导致按钮容器结构异常theme 自定义主题时,CSS 里重写了 .layui-laypage .layui-laypage-next 的 float 或 margin
overflow: hidden 且高度不够,把右侧按钮裁掉了(尤其在固定高度表格里嵌分页时)如果确实需要显式控制,别碰 CSS,直接在 laypage 初始化时传 btnalign: 'r'(虽然默认就是它):
{elem: '#demo', count: 100, limit: 10, curr: 1, btnalign: 'r'}
注意:btnalign 是 laypage 的参数,不是 table.render 的;table 内置分页走的是 laypage 渲染,所以这个参数要放在 page 对象里:
table.render({ elem: '#demo', url: '/api/list', page: { layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], btnalign: 'r' } });
btnalign 只接受 'l'、'c'、'r' 三个字符串值,写成 'right' 或对象会失效layout 数组决定)skin(如 skin: 'yahei'),部分主题会重置 btnalign 行为,此时必须配合 CSS 微调比如想显示“共 12 页,当前第 3 页”,并让它紧贴右侧、“下一页”按钮左边:
$('.layui-laypage').append(...) —— 容易紧贴按钮、换行、响应式错位.layui-laypage-total,它专为此类文案预留.layui-laypage-total { float: right; margin: 0 15px; line-height: 30px; },其中 30px 匹配 laypage 默认行高