代码如下，使用的是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"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>自适应分页按钮</title></head><body><!--这个的目的是把button往下推推 这样看着比较舒适--><div style="height:300px;"></div><style type="text/css">/*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 class="pager"> <a class="pager-btn pager-start no-drop" href="#">首页</a> <a class="pager-btn pager-prev" href="#">上一页</a> <div class="pager-middle"> <a class="pager-btn pager-index" href="#">1</a> <a class="pager-btn pager-index" href="#">2</a> <a class="pager-btn pager-index" href="#">3</a> <a class="pager-btn pager-index" href="#">4</a> <a class="pager-btn pager-index" href="#">5</a> </div> <a class="pager-btn pager-next" href="#">下一页</a> <a class="pager-btn pager-end" href="#">末页</a> <span class="pager-btn pager-info">共n页n条</span></div></body></html>
1 回答
- 1 回答
- 1 关注
- 1470 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消