結構:
1 <div id="page"> 2 <ul> 3 <li><a href="#">首頁</a></li> 4 <li><a href="#">1</a></li> 5 <li><a href="#">2</a></li> 6 <li><a href="#">3</a></li> 7 <li><a href="#">末頁</a></li> 8 </ul> 9 </div>
css語法:
1 ul{text-align: center;} 2 ul li{display: inline;margin-right: 6px;} 3 ul li a{display: inline-block;padding: 4px 10px;font-size: 12px;border: 1px solid #E9E9E9;}
關鍵說明:
1 li的display必須為inline, 這樣, 有兩個好處, 一個是不用float:left, li就可以是一行顯示, 另外發現一個問題, 如果display為inline-block時, chrome和火狐的沒問題, 但在IE內核上運行, 一個li就獨占一行, 除非設置width, 再加float:left; 但這樣又會引發另外一個問題, 就是ul整體的居中, 一個是clear:both; 再就是給ul設置width, 再margin: 0px auto; 但在ul開始時寬度不明確時, 固定了寬度, 當后期頁數太多, 或li頁碼字符太多了, 把整個ul撐開了, 頁碼就會變成雙行顯示, 沒法自適應, 用上面的方法, 只要div#page的寬度足夠, 就不會出現雙行顯示的問題.