Wie zentriere ich eine ungeordnete Liste, ohne übergeordnete Divs zu verwenden?

Zentrieren einer ungeordneten Liste ohne übergeordnete Wrapper

Diese Frage befasst sich mit der Herausforderung, eine ungeordnete Liste (

) zu zentrieren, ohne sich darauf zu verlassen ein übergeordnetes div-Element. Das Ziel besteht darin, die Linksausrichtung innerhalb der Listenelemente (
• ) beizubehalten.

  Lösung:

  Der folgende CSS-Code zentriert die Liste effektiv und behält dabei die Linksausrichtung bei für die Listenelemente:

  ul {
    display: table;
    margin: 0 auto;
  }

  Nach dem Login kopieren

  Erklärung:

  Einstellung display: table wandelt die Liste in eine Tabelle um, wodurch sie die verfügbare Breite ausfüllen kann. Die Eigenschaft margin: 0 auto zentriert die Tabelle und damit die Liste automatisch auf der Seite.

  Beispiel:

  <code class="html"><ul>
    <li>56456456</li>
    <li>4564564564564649999999999999999999999999999996</li>
    <li>45645</li>
  </ul></code>

  Nach dem Login kopieren

  Schlussfolgerung:

  Diese Lösung geht auf die Notwendigkeit ein, eine ungeordnete Liste zu zentrieren, ohne zusätzliche Wrapper im HTML zu erstellen. Durch die Verwendung der automatischen Eigenschaften display: table und margin: 0 wird die Liste horizontal in der Mitte ausgerichtet, während die linke Ausrichtung ihrer Elemente beibehalten wird.

  Das obige ist der detaillierte Inhalt vonWie zentriere ich eine ungeordnete Liste, ohne übergeordnete Divs zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!