Wie zentriere ich eine ungeordnete Liste mit unbekannter Breite horizontal?

Horizontales Zentrieren einer ungeordneten Liste unbekannter Breite

In Website-Fußzeilen ist es üblich, eine Liste von Links horizontal zentriert zu haben. Während das Zentrieren einer Liste mit fester Breite unkompliziert ist, stellt das Zentrieren einer Liste mit unbekannter Breite eine Herausforderung dar. In diesem Artikel wird eine Lösung für dieses Szenario untersucht.

Das Problem

Betrachten Sie den folgenden HTML-Code:

<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>

Wir möchten, dass der gesamte Inhalt innerhalb des #footer-Divs liegt horizontal zentriert. Das Festlegen von text-align: center auf dem Absatz-Tag würde funktionieren, ist hier jedoch nicht anwendbar, da die Listenelemente nebeneinander und nicht untereinander liegen sollten.

Lösungen

Lösung für Listen mit Inline-Elementen:

Wenn die Listenelemente inline angezeigt werden können, reicht das folgende CSS aus:

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

#footer ul {
    list-style: none;
}

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

Lösung für Listen mit Blockelementen:

Wenn die Listenelemente einen display:-Block haben müssen, ist ein komplexeres CSS erforderlich:

<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>

Diese Lösung nutzt die Eigenschaften float und left und right, um die Positionen der Liste anzupassen und seine Elemente entsprechend, um unabhängig von der unbekannten Breite der Liste eine horizontale Zentrierung sicherzustellen.

Das obige ist der detaillierte Inhalt vonWie zentriere ich eine ungeordnete Liste mit unbekannter Breite horizontal?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!