用 inline-block 实现页码导航是兼容性好、代码轻、不易出错的方案，尤其适合需支持 ie8+ 的项目；它比 flex 更稳（避免 ie10–11 中 min-width/overflow 截断问题），比 float 更安全（无需 clearfix 且无塌陷风险），天然支持 vertical-align，对齐直观，不需额外 wrapper，直接作用于 li 或 a 即可。
用 display: inline-block 实现页码导航，是兼容性好、代码轻、不易出错的方案，尤其适合需要支持 IE8+ 的项目。它比 float 更易控制垂直对齐，又比 flex 兼容范围更广。
为什么选 inline-block 而不是 flex 或 float
关键在“可控性”和“降级安全”：flex 在 IE10–IE11 中对 min-width 和 overflow 有 bug，下拉页码或省略号（…）容易被截断；float 需额外 clearfix，且父容器高度塌陷风险高。而 inline-block 在所有现代浏览器 + IE8+ 均稳定，只要处理好空白间隙，就能一劳永逸。
-
inline-block元素天然支持vertical-align，页码对齐、图标居中都更直观 - 不需要改变 HTML 结构（比如加 wrapper div），直接作用于
li或a即可 - 与
:hover、:disabled等状态伪类配合无兼容问题
ul 和 li 的默认样式必须重置
不重置就会出现圆点、缩进、上下间距错乱——这是新手最常漏的一步。核心三行必须写死：
nav ul {
padding: 0;
margin: 0;
list-style: none;
}
然后给 li 设 display: inline-block，但注意：如果 li 内部是 a，必须确保 a 是 display: block，否则点击区域小、hover 不稳定、无障碍属性（如 aria-current）可能失效。
- 漏掉
list-style: none→ 页面左侧多出黑点，且横向偏移 - 漏掉
padding/margin: 0→ 导航整体右移或上浮，和设计稿对不上 -
a没设display: block→ 点击热区仅限文字，移动端体验差
如何消灭 inline-block 的空白间隙
HTML 换行和空格会被渲染为约 4px 的空白，导致页码之间间距不均。这不是 bug，是规范行为。有三种实用解法，按推荐顺序排列：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 父容器（
nav ul）设font-size: 0，子元素（li a）显式重置font-size: 14px（或你实际字号） - 把 HTML 中的
li标签写成连排：<li><a>1</a></li> <li><a>2</a></li>，不换行不加空格 - 改用
margin-left: -4px微调（慎用，响应式时易失效）
第一种最稳妥，但要注意：如果页码里含图标（如 SVG）、span 或其他内联元素，它们也会受 font-size: 0 影响，需单独设置尺寸。
disabled 和 active 状态的样式陷阱
语义化要求“上一页”在首页时不可点，“下一页”在末页时禁用，不能只靠移除 href。真实可用的写法是：
对应 CSS 必须同时处理三件事：
-
.disabled a { pointer-events: none; opacity: 0.5; }—— 禁止点击 + 视觉弱化 -
.active a { background: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b007bff; color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff; }—— 当前页高亮 - 避免用
visibility: hidden或display: none隐藏禁用项，否则屏幕阅读器无法感知“此处有页码但不可用”
真正容易被忽略的是 tabindex="-1" 和 aria-disabled="true"：没有它们，键盘用户 Tab 到禁用项时仍会聚焦，但无法操作，体验断裂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
