suchen

Heim >Web-Frontend >CSS-Tutorial >Wie zentriere ich eine ungeordnete Liste ohne übergeordnetes Div?

Wie zentriere ich eine ungeordnete Liste ohne übergeordnetes Div?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-10-31 08:17:30814Durchsuche

How to Center an Unordered List Without a Parent Div?

Zentrieren einer ungeordneten Liste mit linksbündigen Listenelementen

Beim Webdesign besteht häufig die Notwendigkeit, eine ungeordnete Liste zu zentrieren und gleichzeitig die linke Ausrichtung der Listenelemente beizubehalten. Normalerweise wird dies mithilfe eines Wrappers

erreicht. mit Textausrichtung: Mitte; und Inline-Block-Styling auf dem
    . Allerdings stehen Ersteller oft vor der Herausforderung, ungeordnete Listen ohne übergeordnetes
    zu zentrieren.

    Um dies zu erreichen, müssen unkonventionelle Methoden eingesetzt werden. Eine Lösung besteht darin, die Anzeige display:table; Eigentum. Es konvertiert das

      in eine tabellenähnliche Struktur, sodass sich die Listenelemente wie Tabellenzellen verhalten. Indem Sie den Rand von
        automatisch auf 0 setzen; wird das Element innerhalb seines übergeordneten Containers zentriert.

        Hier ist das Code-Snippet für diese Lösung:

        <code class="CSS">ul {
  display: table;
  margin: 0 auto;
}</code>

        HTML-Beispiel: 

        <code class="HTML"><html>

<body>
  <ul>
    <li>56456456</li>
    <li>4564564564564649999999999999999999999999999996</li>
    <li>45645</li>
  </ul>
</body>

</html></code>

        Diese Methode zentriert effektiv die

          unter Beibehaltung der linken Ausrichtung seines
        • Elemente, wodurch ein umschließendes
          entfällt. Es ist eine unkomplizierte und zuverlässige Lösung zum Ausrichten ungeordneter Listen in komplexen Layouts.

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

          html for while auto using Property this display margin ul table li
          Stellungnahme：
          Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Vorheriger Artikel：CSS Flexbox vs Gridbox: Ein detaillierter VergleichNächster Artikel：CSS Flexbox vs Gridbox: Ein detaillierter Vergleich

    In Verbindung stehende Artikel

    Mehr sehen