inline-flex适用于嵌入式分页，避免强制换行；需用:first-child/:last-child精准控制首尾圆角以形成连续导航条，小屏下应协同调整圆角、间距与禁用态样式。
用 inline-flex 实现紧凑型分页导航
当分页条需要嵌入段落、标题旁或卡片内（而非独占一行）时，inline-flex 比 flex 更合适——它不会强制换行，也不会撑满父容器宽度。但要注意：父元素若为 text-align: center，inline-flex 容器本身需设 margin: 0 auto 才能居中，仅靠文本对齐无效。
常见错误是直接套用 display: flex 后发现分页条“跳到下一行”或“顶满整行”，尤其在 <p></p> 或 <div class="card-body"> 中。此时应检查父容器的 <code>display 类型和子元素是否被意外设为块级。
-
inline-flex下的子项（如<a>或<button>）默认仍为inline-block行为，无需额外设display - 若子项文字过长导致换行，加
white-space: nowrap到容器上 - 避免在
inline-flex容器上设width: 100%，这会抵消其内联特性
圆角控制的关键：统一处理首尾与中间项
分页按钮的圆角不能只靠 border-radius: 4px 简单统设——否则所有按钮左右都有圆角，视觉上像一串分离的胶囊，缺乏整体感。真正合理的做法是：首项左圆角 + 右直角，末项右圆角 + 左直角，中间项全直角。
实现方式有两种：
立即学习“前端免费学习笔记（深入）”；
- 用 CSS 选择器精准定位：
.pagination a:first-child { border-radius: 4px 0 0 4px; }，.pagination a:last-child { border-radius: 0 4px 4px 0; }，中间项不设圆角 - 更健壮的方式是给每个
<a>加类名（如prev、next、page-1），用类控制，避免伪类在动态插入/删除页码时失效 - 注意：若使用省略号
<span class="ellipsis">…</span>，必须设border-radius: 0并pointer-events: none，否则圆角+边框会让它看起来像可点击按钮
响应式断点下圆角与间距的协同调整
小屏（如 max-width: 480px）时，若保持相同圆角值（如 4px），在更小的按钮尺寸下会显得突兀；同时，gap 或 margin 若不随尺寸缩放，容易造成拥挤或断裂。
推荐方案：
- 用
rem或em定义圆角（如border-radius: 0.25rem），配合根字体缩放自然适配 - 放弃固定
gap: 8px，改用gap: clamp(4px, 1vw, 8px)，确保小屏不挤、大屏不松 - 在媒体查询中重置首尾圆角：小屏下可设为
border-radius: 6px全圆角，让单个按钮更易点击 - 禁用状态（
:disabled）的圆角必须与正常状态一致，否则视觉割裂
为什么不用 flex + gap 就够了？还得管圆角细节
因为 gap 解决的是间距问题，而圆角决定的是「边界语义」：用户一眼要分辨出这是「一个连续导航条」还是「一堆独立按钮」。很多项目上线后才发现，分页在 iPad 上看起来像断开的，根源就是所有按钮都带左右圆角，缺乏首尾衔接意识。
另一个常被忽略的点是：当用 JavaScript 动态渲染页码时，:first-child 和 :last-child 可能匹配到省略号或箭头按钮，而非数字页码——这意味着你得在 JS 渲染逻辑里明确控制哪些元素该加 first/last 类，而不是全依赖 CSS 伪类。
