如何将未知宽度的无序列表居中？

将宽度未知的无序列表居中

在网页设计中，通常需要水平居中链接列表，例如页脚中的链接。虽然对齐文本很简单，但在不指定宽度的情况下居中无序列表可能会很棘手。

问题：

如何水平居中未知宽度的无序列表，列表项应并排显示，而不是一个在另一个下？

答案：

选项 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中文网其他相关文章！