完美解决分页按钮换行与挤压的CSS优化方案

在网页设计中，当分页按钮（1, 2, 3...）数量较多，或者在手机等窄屏设备上访问时，默认的 Flex 布局可能会因为空间不足而导致按钮自动换行（折行），或者被严重挤压变形。

为了实现「强制不换行、大小固定、超出时可横向滑动」的完美效果，您只需要微调 .pagination 和 .page-btn 的 CSS 样式。

🛠️ 解决方案：修改 CSS 样式

请在您的 sitemap.html 模板中，找到 /* 分页模块 */ 部分，用以下代码进行替换：

/* ================= 分页模块优化（确保绝对不换行） ================= */
.pagination {
  margin-top: 3rem;
  display: flex;
  justify-content: center; /* 默认居中对齐 */
  align-items: center;
  gap: 0.5rem;
  
  /* 核心属性 1：强制所有子元素在一行显示，绝不换行 */
  flex-wrap: nowrap; 
  
  /* 核心属性 2：如果手机端按钮实在太多，允许横向滚动滑动，不撑破容器 */
  overflow-x: auto;
  padding: 0.5rem 1.25rem;
  
  /* 隐藏移动端滚动条（可选，保持美观） */
  -webkit-overflow-scrolling: touch;
}

/* 隐藏分页栏的滚动条轨道（美观性优化） */
.pagination::-webkit-scrollbar {
  display: none;
}

.page-btn {
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-main);
  text-align: center;
  
  /* 核心属性 3：阻止按钮因为空间不足而被缩窄、挤压变形 */
  flex-shrink: 0;
  
  /* 设定最小宽度，确保单双位数页码高度宽度协调 */
  min-width: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.page-btn.active, .page-btn:hover {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}

💡 为什么这样写能解决问题？

1. flex-wrap: nowrap;：显式声明不换行。即使按钮加起来的宽度超过了屏幕宽度，它们也会坚守在同一排。
2. flex-shrink: 0;：默认情况下，Flex 容器内的子元素在空间不足时会自我压缩（flex-shrink 默认为 1），导致按钮文字被挤成一团。设置为 0 可以让每个按钮保持原本的精美尺寸。
3. overflow-x: auto;：如果用户的手机屏幕很窄（比如 iPhone SE），按钮排不下了，这段代码会允许用户像滑动卡片一样左右滑动分页栏，既解决了换行难看的问题，又保证了移动端的绝佳体验。