overflow inlinb-block 导致导致元素上移？

代码如下，使用的是chrome浏览器当将 pager-prev或者pager-next的overflow:hidden;去掉一个，机会出现不在一行显示的情况，求解原因？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>自适应分页按钮</title>

</head>

<body>

/*reset*/

a{color:#000; text-decoration:none;}

a:hover{color:#000; text-decoration:none;}

/*common*/

.pager{text-align:center;}

.pager-btn{padding:5px 15px; border:1px solid #CCC; border-radius:8px; background-color:#FFF;}

.pager-btn:hover{ background-color:#ccc;}

.no-drop{cursor:no-drop;}

@media screen and (min-width:320px){

/*做成类似于起点网手机页面的pager按钮因此需要隐藏掉首页，末页共n页n行的button*/

.pager-start,

.pager-end,

.pager-info{display:none;}

/*因为起点中中间的是一个列表，因此必须有一个块元素，但是因为要处于同一行，并且在屏幕较宽的时候进行居中显示，因此选择使用块元素*/

/*每一个都加上overflow 原因不清楚如果仅仅在pager-middle加上会导致两边不动，但是pager-middle会出现上浮的情况可能是因为overflow的清除浮动的作用导致的*/

.pager-prev,

.pager-middle,

.pager-next{display:inline-block; overflow:hidden;}

.pager-middle{width:148px; height:30px;}

.pager-btn{padding:5px 10px;}

.pager-index{display:block;}

}

@media screen and (min-width:480px){

}

@media screen and (min-width:568px){

}

@media screen and (min-width:768px){

}

@media screen and (min-width:992px){

}

@media screen and (min-width:1200px){

</style>

</div>

<span class="pager-btn pager-info">共n页n条</span>

</div>

</body>

</html>

咕咕问

浏览 1494回答 1

随时随地看视频慕课网APP