如何使宽度未知的无序列表水平居中？-css教程-PHP中文网

如何使宽度未知的无序列表水平居中？

Patricia Arquette

发布： 2024-10-29 07:50:30

原创

742 人浏览过

How to Horizontally Center an Unordered List with Unknown Width?

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

在网站页脚中，通常会出现水平居中的链接列表。虽然将固定宽度的列表居中很简单，但将未知宽度的列表居中却是一个挑战。本文探讨了这种情况的解决方案。

问题

考虑以下 HTML 代码：

<code class="HTML"><div id="footer">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div></code>

登录后复制

我们希望 #footer div 中的全部内容水平居中。在段落标签上设置 text-align: center 可以，但在这里不适用，因为列表项应该并排，而不是彼此下方。

解决方案

解决方案包含内联项目的列表：

如果列表项目可以内联显示，则以下 CSS 就足够了：

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

#footer ul {
    list-style: none;
}

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

登录后复制

包含块项目的列表的解决方案：

如果列表项必须有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>

登录后复制

这个解决方案利用了float和left、right属性来调整列表的位置及其相应的项目，确保水平居中，无论列表的宽度未知。

以上是如何使宽度未知的无序列表水平居中？的详细内容。更多信息请关注PHP中文网其他相关文章！