如何以可變寬度水平居中無序列表？

寬度未知的無序列表的水平對齊

在網站頁腳中，通常有一個表示為導航連結的列表無序列表。無論清單寬度如何，為了確保水平居中，在 UL 元素上設定固定寬度的傳統方法通常是不切實際的。

內嵌列表項目的解決方案

如果列表項目可以內聯顯示，解決方案很簡單：

<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>

此CSS 位置將UL 元素放置在頁面中心，並將LI 元素設定為圍繞其浮動，從而實現所需的水平對齊。

以上是如何以可變寬度水平居中無序列表？的詳細內容。更多資訊請關注PHP中文網其他相關文章！