Wie zentriere ich eine ungeordnete Liste unbekannter Breite horizontal?

Horizontales Zentrieren einer ungeordneten Liste unbekannter Breite

Beim Erstellen einer Fußzeile mit einer Reihe von Links, die als ungeordnete Liste dargestellt werden, kommt es häufig vor Es ist wünschenswert, die Liste innerhalb der Fußzeile horizontal zu zentrieren. Während es einfach ist, Textelemente oder Elemente mit bekannter Breite zu zentrieren, stellt das Zentrieren einer ungeordneten Liste unbekannter Breite eine Herausforderung dar.

Inline-Listenelemente

Wenn die Listenelemente kann inline angezeigt werden, die Lösung ist einfach:

<code class="css">#footer { text-align: center; }
#footer ul { list-style: none; }
#footer ul li { display: inline; }</code>

Elemente der Liste blockieren

In bestimmten Fällen kann es jedoch erforderlich sein, display: block; auf den Listenelementen. In diesem Fall ist eine etwas komplexere Lösung 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>

Dieses CSS positioniert die ungeordnete Liste in der Mitte des Fußzeilen-Div und versetzt die Listenelemente so, dass sie horizontal innerhalb der Liste ausgerichtet sind.

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