分页按钮横向对齐问题根源在于父容器未设 display: flex；应统一用 或 ，添加 aria-current="page" 等可访问性属性，并通过 flex-wrap、gap 和媒体查询实现响应式布局。
列表行数太多时，分页不是靠 HTML 自身实现的，而是靠 JavaScript 控制显示范围 + CSS 布局分页控件。关键不在“怎么排列表”，而在“怎么排分页按钮”——按钮横向对齐出问题，90% 是因为父容器没设 display: flex 或没处理好换行与间距。
分页按钮容器必须用 display: flex
很多人直接给 <ul></ul> 加 text-align: center 或一堆 float: left，结果按钮错位、间距不均、响应式失效。真正可靠的方式只有一种：把分页按钮外层容器（比如 <nav class="pagination"></nav>）设为 display: flex。
-
justify-content: center实现居中对齐；justify-content: flex-end右对齐；justify-content: space-between两端对齐 - 避免用
margin手动调间距，改用gap: 8px—— 更稳定，不会因 margin 折叠或父容器 padding 干扰 - 如果按钮数量多（比如 10+ 页），加
flex-wrap: wrap，否则小屏会溢出或缩小文字 - IE 不支持
gap，需降级用margin-right+:last-child { margin-right: 0 }
<li> 里放按钮还是链接？别混用
常见错误是把 <a></a> 和 <button></button> 都塞进同一个 <ul></ul>，导致样式不一致、键盘导航异常、无障碍属性缺失。统一用 <a></a>（适合跳转页面）或统一用 <button></button>（适合 JS 事件驱动的无刷新分页）。
- 用
<a></a>时，确保href值合理：当前页用#，禁用状态加aria-disabled="true"并移除href - 用
<button></button>时，必须加type="button"，否则表单内点击会默认提交 - 当前页按钮要加
aria-current="page"，这是屏幕阅读器识别当前页的关键属性 - 所有按钮/链接的
padding至少保证 44×44px 触摸区域，尤其移动端
响应式下横向变垂直，别改 HTML 结构
小屏时横向分页按钮挤成一团，直接用媒体查询切换布局方向就行，不需要额外写两套 HTML。
- 在
@media (max-width: 768px)内，把分页容器设为flex-direction: column - 同时把
gap改小（比如从12px降到4px），避免垂直堆叠太松散 - 若按钮文字过长，可加
white-space: nowrap防止意外换行，再配合overflow: hidden+text-overflow: ellipsis - 禁用按钮（如“上一页”在第 1 页）不要只靠视觉灰度，必须加
pointer-events: none+tabindex="-1"
真正容易被忽略的是：分页按钮的语义完整性。很多人只顾样式对齐，却漏掉 aria-current、aria-disabled、role="navigation" 这些属性——它们不影响横向排列，但决定这个分页是否真正可用。横向对齐只是表象，可访问性才是分页能被所有人使用的底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
