Wie zentriere ich eine ungeordnete Liste ohne übergeordnetes Div?-CSS-Tutorial-php.cn

Wie zentriere ich eine ungeordnete Liste ohne übergeordnetes Div?

Mary-Kate Olsen

Freigeben： 2024-10-31 08:17:30

Original

666 Leute haben es durchsucht

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

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

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

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

Nach dem Login kopieren

HTML-Beispiel:

<code class="HTML"><html>

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

</html></code>

Nach dem Login kopieren

Diese Methode zentriert effektiv die

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!

Quelle：php.cn

Vorheriger Artikel：CSS Flexbox vs Gridbox: Ein detaillierter Vergleich Nächster Artikel：Wie richtet man Text in Flexbox-Elementen aus, wenn der Inhalt die Elementbreite überschreitet?

Erklärung dieser Website

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

Neueste Artikel des Autors

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

1724

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

1880

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

1594

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...