代碼如下，使用的是chrome瀏覽器 ? 當(dāng)將 pager-prev或者pager-next的overflow:hidden;去掉一個(gè)，機(jī)會(huì)出現(xiàn)不在一行顯示的情況，求解原因？<!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>自適應(yīng)分頁(yè)按鈕</title></head><body><!--這個(gè)的目的是把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){ /*做成類(lèi)似于起點(diǎn)網(wǎng)手機(jī)頁(yè)面的pager按鈕 ?因此需要隱藏掉 首頁(yè)，末頁(yè) 共n頁(yè)n行的button*/ .pager-start, .pager-end, .pager-info{display:none;} /*因?yàn)槠瘘c(diǎn)中中間的是一個(gè)列表，因此必須有一個(gè)塊元素，但是因?yàn)橐幱谕恍?，并且在屏幕較寬的時(shí)候進(jìn)行居中顯示，因此選擇使用塊元素*/ /*每一個(gè)都加上overflow 原因不清楚 ? 如果僅僅在pager-middle加上會(huì)導(dǎo)致兩邊不動(dòng)，但是pager-middle會(huì)出現(xiàn)上浮的情況 ? ?可能是因?yàn)閛verflow的清除浮動(dòng)的作用導(dǎo)致的*/ .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="#">首頁(yè)</a>? ? <a class="pager-btn pager-prev" href="#">上一頁(yè)</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="#">下一頁(yè)</a>? ? <a class="pager-btn pager-end" href="#">末頁(yè)</a>? ? <span class="pager-btn pager-info">共n頁(yè)n條</span></div></body></html>
添加回答
舉報(bào)
0/150
提交
取消