先上效果圖：
再上代碼：
<!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>ul中li居中示例</title> <style type="text/css"> .pagationDiv{ border:1px solid red; /*加此邊框以便於看清ul的位置*/ } .pagationDiv ul{ list-style:none; margin: 0 auto; /*讓ul在div中水平居中 */ padding:0; text-align:center; /*讓li在ul中水平居中*/ } .pagationDiv ul li{ display:inline-block; height:30px; line-height:30px; margin-right:10px; } .pagationDiv ul li a{ border:1px solid teal; padding-left:5px; padding-right:5px; text-decoration: none; } .pagationDiv ul li a.noborder{ border:0px solid blue; } .pagationDiv ul li a:hover{ background:navy; color:white; } </style> </head> <body> <div id="list5pagationDiv" class="pagationDiv"> <ul> <li><a id="prevPageLink" href="#">上一頁</a></li> <li><a id="fisrtPageLink" href="#">first</a></li> <li><a id="prevDotsLink" href="javascript:void();" class="noborder">...</a></li> <li><a id="page1Link" href="#">1</a></li> <li><a id="page2Link" href="#">2</a></li> <li><a id="page3Link" href="#">3</a></li> <li><a id="page4Link" href="#">4</a></li> <li><a id="page5Link" href="#">5</a></li> <li><a id="page6Link" href="#">6</a></li> <li><a id="page7Link" href="#">7</a></li> <li><a id="page8Link" href="#">8</a></li> <li><a id="page9Link" href="#">9</a></li> <li><a id="nextDotsLink" href="javascript:void();" class="noborder">...</a></li> <li><a id="lastPageLink" href="#">last</a></li> <li><a id="nextPageLink" href="#">下一頁</a></li> </ul> </div> </body> </html> <script type="text/javascript"> <!-- // 腳本 //--> </script>
END
PS：話說Editplus3真是一款好編輯器，現在流行的都沒有直接查看HTML功能了。