如何以可变宽度水平居中无序列表？

宽度未知的无序列表的水平对齐

在网站页脚中，通常有一个表示为导航链接的列表无序列表。无论列表宽度如何，为了确保水平居中，在 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中文网其他相关文章！