添加white-space: nowrap后分页上方出现意外间距，求解决

哥们，卡了四小时太熬人了！我帮你捋捋这个问题的根源，咱们一步步搞定它：

问题根源分析 #

看你的代码，核心冲突点在这几个地方：

1. 外层div设置了white-space: nowrap，加上分页控件用了position: absolute，绝对定位元素脱离文档流后，和nowrap容器的布局规则打架，导致了意外间距。
2. 分页控件的样式里有个无效的margin-left: ;，这会干扰浏览器的布局计算。
3. 给分页链接加的margin-top: 50px，也可能是导致上方间距的推手之一。

具体解决步骤 #

• 修复绝对定位的父容器
  绝对定位的元素需要有相对定位的父容器来锚定，不然它会相对于整个页面定位，和外层的nowrap容器彻底脱节。给包裹分页控件的那个div加上position: relative，同时把旧的align="center"换成更规范的CSS属性：

  <div style="padding-top:10px; position: relative; text-align: center;">
    <div id="pagination_controls" draggable="false" ondragstart="return false">
      <?php echo $paginationCtrls; ?>
    </div>
  </div>
  

• 调整分页控件的定位样式
  把分页控件的position: absolute改成position: relative（如果不需要绝对定位的话），去掉无效的margin-left: ;和分页链接上的margin-top: 50px：

  div#pagination_controls {
    position: relative;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -o-user-select: none;
    font-size: 21px;
    width: 90%;
    max-width: 90%;
    overflow-x: auto!important;
  }
  
  div#pagination_controls>a {
    color: #06F;
    /* 删掉这个margin-top: 50px; */
  }
  

  如果确实需要用绝对定位，就改成下面这样，确保它相对于父容器居中：

  div#pagination_controls {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    /* 其他样式不变 */
  }
  

• 检查white-space: nowrap的必要性
  外层div的white-space: nowrap是你怀疑的点，其实如果只是要让容器出现横向滚动条，overflow-x: auto已经足够。white-space: nowrap会让内部块级元素变成行内块布局，可能带来额外的间距。可以试试把外层的white-space: nowrap去掉，看看问题是否消失。

• 验证效果
  做完上面的修改后，刷新页面看看那个黑色标记间距是不是消失了。如果还有残留，用浏览器的开发者工具（F12）选中那个间距元素，查看它的盒模型属性，定位到具体的样式来源再调整。

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