代碼如下，使用的是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 關注
- 1524 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消