:改變塊級元素的 display 為 inline 類型(設置為 行內元素 顯示),然后使用 text-align:center
來實現(xiàn)居中效果。如下例子:
html代碼:
<body> <div> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> </body>
css代碼:
<style> .container{ text-align:center; } /* margin:0;padding:0(消除文本與div邊框之間的間隙)*/ .container ul{ list-style:none; margin:0; padding:0; display:inline; } /* margin-right:8px(設置li文本之間的間隔)*/ .container li{ margin-right:8px; display:inline; } </style>
這種方法相比第一種方法的優(yōu)勢是不用增加無語義標簽,但也存在著一些問題:它將塊狀元素的 display 類型改為 inline,變成了行內元素,所以少了一些功能,比如設定長度值。