Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Warum verschieben sich meine Listenelemente nach einem CSS-Reset und wie kann ich die Ausrichtung korrigieren?

Mary-Kate Olsen
Freigeben: 2024-11-25 21:53:12
Original
634 Leute haben es durchsucht

Why Are My List Items Shifting After a CSS Reset, and How Can I Fix the Alignment?

Listenelemente verschieben sich nach CSS-Reset: Zweite Zeilen an Aufzählungszeichen ausrichten

Nach dem CSS-Reset sind mehrere Benutzer auf ein Problem gestoßen, bei dem die Zweite Textzeilen innerhalb von Listenelementen (li) beginnen nach einem Umbruch unterhalb des Aufzählungszeichens. Diese visuelle Fehlausrichtung kann korrigiert werden, indem die list-style-position-Eigenschaft des li-Tags angepasst und auf „outside“ gesetzt wird.

Diese Lösung kann jedoch zu Einrückungsproblemen mit den Aufzählungszeichen führen. Um dies zu beheben, kann eine zusätzliche Randeigenschaft auf das übergeordnete Element ul angewendet werden, um die Ausrichtung mit dem Text außerhalb der Liste sicherzustellen.

Aktualisierte Lösung (15. März 2014):

ul {
  list-style-position: outside;
  margin-left: 1em;
}
Nach dem Login kopieren

Dieser Code bietet eine verfeinerte Lösung, die das oben genannte Einrückungsproblem behebt und die Lesbarkeit verbessert. Die margin-Eigenschaft wird auf das ul-Element angewendet und stellt sicher, dass die gesamte Liste eingerückt wird und die richtige Ausrichtung mit dem Text außerhalb der Liste erhalten bleibt.

Das obige ist der detaillierte Inhalt vonWarum verschieben sich meine Listenelemente nach einem CSS-Reset und wie kann ich die Ausrichtung korrigieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage