Wie richtet man die zweite Zeile eines zweizeiligen Listenelements in CSS aus?

Li-Element in zwei Zeilen mit ausgerichteter zweiter Zeile

In einer ungeordneten Liste stoßen Sie möglicherweise auf ein langes Listenelement, das sich über zwei Zeilen erstreckt. aber die zweite Zeile ist nicht mit der ersten ausgerichtet. Um diese Fehlausrichtung zu beheben, nutzen Sie die Eigenschaft „text-indent“.

Die Eigenschaft „text-indent“ gibt den horizontalen Abstand vor der ersten Zeile des Textinhalts in einem Element an. Durch Angabe eines negativen Texteinzugswerts können Sie die erste Zeile um einen bestimmten Betrag nach links verschieben. Um diesen Versatz auszugleichen, wenden Sie einen positiven Padding-Left-Wert an.

Im bereitgestellten Codebeispiel hat die .fa-fw-Klasse eine Breite von 1,28571429em. Um die zweite Zeile auszurichten, setzen wir den text-indent des li-Elements auf -1.28571429em und den padding-left auf 1.28571429em. Dadurch wird der Versatz aufgehoben, was zu einer linksbündigen zweiten Zeile führt.

ul {
  width: 300px;
}
li {
    padding-left: 1.28571429em;
    text-indent: -1.28571429em;
}

Durch die Implementierung dieser Lösung wird sichergestellt, dass die zweite Zeile des langen Listenelements an der ersten Zeile ausgerichtet ist, wodurch eine optisch ausgewogene ungeordnete Liste entsteht.

Das obige ist der detaillierte Inhalt vonWie richtet man die zweite Zeile eines zweizeiligen Listenelements in CSS aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!