Wie zentriere ich eine ungeordnete Liste unbekannter Breite?

Zentrieren einer ungeordneten Liste unbekannter Breite

Im Webdesign ist es oft wünschenswert, eine Liste von Links, wie sie beispielsweise in Fußzeilen zu finden sind, horizontal zu zentrieren. Während das Ausrichten von Text unkompliziert ist, kann es schwierig sein, eine ungeordnete Liste ohne Angabe ihrer Breite zu zentrieren.

Frage:

Wie zentriert man eine ungeordnete Liste unbekannter Breite horizontal? Wo sollen Listenelemente nebeneinander und nicht untereinander angezeigt werden?

Antwort:

Option 1: Inline-Anzeige

Wenn Listenelemente so eingestellt werden können, dass sie angezeigt werden: inline, ist die Lösung einfach:

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

#footer ul {
  list-style: none;
}

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

Option 2: Anzeige mit Positionierung blockieren

Wenn display:-Block muss für Listenelemente verwendet werden. Beachten Sie das folgende 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>

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