Wie richtet man zweizeilige Listenelemente mit falsch ausgerichteten zweiten Zeilen aus?

Li-Artikel auf zwei Zeilen. Die zweite Zeile hat keinen Rand

Wenn es sich um ein Listenelement handelt, das sich über zwei Zeilen erstreckt und die zweite Zeile nicht an der ersten ausgerichtet ist, muss eine Ausrichtung implementiert werden. Diese Situation tritt hauptsächlich auf, weil Inline-Elemente innerhalb einer Liste den Fluss des nachfolgenden Textes ermöglichen, ohne dessen Ausrichtung zu beeinträchtigen.

Um dieses Problem zu beheben, ist es möglich, die Eigenschaft „text-indent“ auszunutzen. Diese Eigenschaft steuert den Abstand vor dem Beginn der ersten Textzeile innerhalb eines Elements. Durch Anwenden eines negativen „text-indent“-Werts kann die erste Zeile um einen bestimmten Betrag nach links verschoben werden. Diese Verschiebung kann dann mit einem positiven „padding-left“-Wert ausgeglichen werden, was zur gewünschten Ausrichtung führt.

Betrachten Sie dieses Beispiel:

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

In diesem Beispiel ist „1.28571429em“ Der Wert entspricht der Breite des Symbolelements „font-awesome“, das für das Häkchen verantwortlich ist. Mit dieser Technik kann der Text in beiden Zeilen unter dem Symbol ausgerichtet werden, wodurch die Fehlausrichtung korrigiert wird.

Das obige ist der detaillierte Inhalt vonWie richtet man zweizeilige Listenelemente mit falsch ausgerichteten zweiten Zeilen aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!