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

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

在網頁設計中，通常需要水平居中鏈接列表，例如頁腳中的鏈接。雖然對齊文字很簡單，但在不指定寬度的情況下居中無序列表可能會很棘手。

問題：

如何水平居中未知寬度的無序列表，列表項應並排顯示，而不是一個在另一個下？

答案：

選項1：內嵌顯示

如果清單項目可以設定為display: inline，解決方案很簡單：

<code class="css">#footer {
  text-align: center;
}

#footer ul {
  list-style: none;
}

#footer ul li {
  display: inline;
}</code>

選項2：帶定位的區塊顯示

如果display: block 必須用於列表項，請考慮以下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>

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