Wie kann man falsch ausgerichtete zweite Zeilen in mehrzeiligen Listenelementen beheben?

Li-Element in zwei Zeilen: Fehlausrichtung in der zweiten Zeile beheben

Beim Arbeiten mit ungeordneten Listen kann es vorkommen, dass eine Liste Das Element wird in eine zweite Zeile umgebrochen, wodurch die zweite Zeile von der ersten versetzt wird. Diese Fehlausrichtung kann die visuelle Ästhetik Ihrer Liste beeinträchtigen.

Im bereitgestellten Beispiel wurde der folgende HTML-Code zum Erstellen der Liste verwendet:

<ul>
  <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
  <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
  <li><i class="fa fa-check fa-fw"></i>This is a list item that actually takes up 2 lines. Looks ugly</li>
</ul>

Das Problem tritt auf, weil das Häkchensymbol ( ) ist Inline-Inhalt. Wenn der Text umgebrochen wird, bleibt das Symbol in derselben Zeile, was zu einer Fehlausrichtung der zweiten Zeile führt.

Um dieses Problem zu beheben, können Sie die Eigenschaft text-indent verwenden, die den verbleibenden horizontalen Platz angibt vor der ersten Textzeile in einem Element. Durch Festlegen eines negativen Texteinzugswerts können Sie die erste Zeile nach links verschieben und sie an den nachfolgenden Zeilen ausrichten.

li {
  text-indent: -1.28571429em;
}

Um den negativen Einzug zu kompensieren, können Sie einen positiven Abstand auf die Zeile anwenden Element:

li {
  padding-left: 1.28571429em;
}

Durch die Anwendung dieser Stile können Sie die zweite Zeile des Listenelements an der ersten ausrichten, was zu einem zusammenhängenderen Erscheinungsbild führt Präsentation.

Das obige ist der detaillierte Inhalt vonWie kann man falsch ausgerichtete zweite Zeilen in mehrzeiligen Listenelementen beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!