Wie zentriere ich eine ungeordnete Liste horizontal mit variabler Breite?

Horizontale Ausrichtung ungeordneter Listen mit unbekannter Breite

In der Fußzeile einer Website ist es üblich, eine Liste von Links für die Navigation als darzustellen ungeordnete Liste. Um die horizontale Zentrierung unabhängig von der Listenbreite sicherzustellen, ist die herkömmliche Methode zum Festlegen einer festen Breite am UL-Element oft unpraktisch.

Lösung für Inline-Listenelemente

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

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

Wenn Listenelemente jedoch als Blöcke angezeigt werden müssen, erweist sich das folgende CSS als wirksam:

<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 das UL-Element in der Mitte der Seite und lässt die LI-Elemente um dieses herum schweben, wodurch die gewünschte horizontale Ausrichtung erreicht wird.

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