添加空白后无意外的margin-top [no-wrap]

时间:2018-01-28 02:41:53

标签: html css

请帮我坚持四个小时。当我在div上使用white-space: nowrap;时,我的这个意想不到的空间会在我的分页上方留下黑色标记UNEXPECTED SPACE,请问我该如何解决这个问题,我尝试添加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>

2 个答案:

答案 0 :(得分:2)

只需制作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>

答案 1 :(得分:2)

添加trex1999表示你也可以添加z-index。

<div class="container">
    <div style="z-index:800;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>