如何使寬度未知的無序列表水平居中？-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中文網其他相關文章！