如何让超宽的ul li分页菜单自动换行适配移动端？

针对你遇到的移动端分页菜单溢出窗口的问题，我们可以通过调整分页容器的布局逻辑来解决，以下是具体的修改方案和原因分析：

步骤1：修复分页容器的核心布局 #

你的<ul class="pagination">默认没有设置合适的换行规则，这是移动端溢出的关键问题。给这个容器添加以下CSS规则：

.pagination {
  display: flex;
  flex-wrap: wrap; /* 核心：空间不足时自动换行 */
  padding-left: 0; /* 清除ul默认左内边距，避免多余空白 */
  list-style: none; /* 移除默认列表圆点 */
  margin: 1rem auto; /* 可选：让分页容器水平居中 */
  overflow-x: hidden; /* 彻底禁止横向滚动 */
}

步骤2：统一菜单项的间距逻辑 #

你之前给.page-link和激活项都加了margin:5px，会导致相邻项间距叠加（比如两个项之间会有10px空隙），结合flex布局，我们用更简洁的gap来统一控制间距：

.pagination {
  /* 保留上面的规则，新增 */
  gap: 5px; /* 替代每个item的margin，统一控制间距 */
}

/* 移除.page-link和激活项里的margin */
.page-link {
  margin: 0; /* 删掉原来的margin:5px */
  /* 其他原有样式保留 */
  display: block;
  padding: .5rem .75rem;
  line-height: 1.25;
  color: #282d32 !important;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 25px;
}

.page-item.active .page-link {
  margin: 0; /* 删掉原来的margin:5px */
  /* 其他原有样式保留 */
  z-index: 1;
  color: #282d32;
  background-color: #acacac !important;
  border-color: #acacac !important;
  border-radius: 25px;
}

为什么之前的方法没生效？ #

• overflow-x: hidden无效：你可能只给子元素加了这个属性，实际上需要给分页容器（或它的直接父容器）添加，同时确保容器没有设置固定宽度或超出视口的宽度。
• display: inline-block导致垂直堆叠：默认<ul>是块级元素，仅给<li>加inline-block但没限制容器宽度，再加上.page-link是display:block会撑满li宽度，自然会垂直排列，flex布局才是更适配的方案。

完整修改后的CSS代码 #

.pagination {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  list-style: none;
  margin: 1rem auto;
  gap: 5px;
  overflow-x: hidden;
}

.page-item:first-child .page-link { 
  border-top-left-radius: 25px; 
  border-bottom-left-radius: 25px; 
} 

.page-item.active .page-link { 
  z-index: 1; 
  color: #282d32; 
  background-color: #acacac !important; 
  border-color: #acacac !important; 
  border-radius: 25px; 
} 

.page-link:not(:disabled):not(.disabled) { 
  cursor: pointer; 
} 

.page-link { 
  display: block; 
  padding: .5rem .75rem;
  line-height: 1.25; 
  color: #282d32 !important; 
  background-color: #fff; 
  border: 1px solid #dee2e6; 
  border-radius: 25px; 
} 

.page-item:last-child .page-link { 
  border-top-right-radius: 25px; 
  border-bottom-right-radius: 25px; 
}

修改后，移动端的分页菜单会在宽度不足时自动换行，不会超出窗口范围，同时保持桌面端的正常布局效果。

内容的提问来源于stack exchange，提问作者Paul Thompson