如何在 CSS 中將未知寬度的無序列表置中？

將未知寬度的無序列表居中

在網頁設計中，通常在頁腳中放置無序列表的連結以便於導航。但是，如果清單的寬度未知，則將清單項目水平居中可能會很困難。

可以內嵌顯示項目的清單的一種解決方案是：

<code class="css">#footer { text-align: center; }
#footer ul { list-style: none; }
#footer ul li { display: inline; }</code>

這會將文字對齊中心套用於頁腳，刪除預設的清單樣式，並將清單項設定為顯示為內聯元素。

但是，在清單項目必須顯示為區塊的情況下，下列 CSS 程式碼可以使用：

<code class="css">#footer { width: 100%; overflow: hidden; }
#footer ul { list-style: none; position: relative; float: left; display: block; left: 50%; }
#footer ul li { position: relative; float: left; display: block; right: 50%; }</code>

此方法將頁腳設定為全寬並隱藏任何溢位。無序列表絕對定位，向左浮動，然後向左移動50%。列表項目也是絕對定位的、向左浮動、向右移動 50%。這有效地將無序列表水平居中，無論其寬度如何。

以上是如何在 CSS 中將未知寬度的無序列表置中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！