html - 添加空格后出现意外的页边距上限[no-wrap]

请帮我坚持四个小时。当我在div上使用white-space: nowrap;时，在分页上方出现了这个意外的空白圆圈黑标，请问如何解决这个问题，我尝试添加margin-top:-50px!important;，但它会停留在该位置并且不会根据边距移动规则。

<div class="container">
    <div style="height:50px;background-color:#eee;overflow-x:auto;white-space: nowrap;width:100%;margin-bottom:40px;border:1px solid #000;"> //I guess this is what makes the unexpected space, PLEASE HELP.
        <div align="center" style="padding-top:10px;">
            <div id="pagination_controls" draggable="false" ondragstart="return false">
                <?php echo $paginationCtrls; ?>
            </div>
        </div>
    </div>
</div>


<style>
div#pagination_controls {
  position: absolute;
  -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;
  margin-left: ;
}

div#pagination_controls>a {
  color: #06F;
  margin-top: 50px;
}

div#pagination_controls>a:visited {
  color: #06F;
}

#pagination_controls a.main-nav-item:hover {
  background-color: #fff!important;
  padding-top: 7px;
  padding-bottom: 7px;
  border: 1px solid #000;
  padding-left: 5px;
  padding-right: 5px;
  color: #000;
}
</style>

最佳答案

只需将div position:absolute;设置为任意位置即可。指定所需的top:。可以这样做-

<div class="container">
    <div style="position:absolute;top:10px;height:50px;background-color:#eee;overflow-x:auto;white-space: nowrap;width:100%;margin-bottom:40px;border:1px solid #000;"> //I guess this is what makes the unexpected space, PLEASE HELP.
        <div align="center" style="padding-top:10px;">
            <div id="pagination_controls" draggable="false" ondragstart="return false">
                <?php echo $paginationCtrls; ?>
            </div>
        </div>
    </div>
</div>

关于html - 添加空格后出现意外的页边距上限[no-wrap]，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48482670/