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