Li-Element in zwei Zeilen. Die zweite Zeile hat keine Marge
Ich arbeite gerade an einer ungeordneten Liste mit Listenelementen mit Taglines. Ich habe ein Problem mit einem Listenelement, das lang genug ist, um zwei Zeilen aufzunehmen (siehe Bild)
Ich möchte es so, dass die zweite Zeile mit der ersten Zeile ausgerichtet ist. Dies ist der HTML-Code, den ich verwende. Ich habe fontAwesome für die Scheckbilder verwendet.
Ich habe bereits versucht, mehrere zwischen "2" und "Zeilen" einzugeben, aber das scheint mir eine wirklich schlechte Übung zu sein. Ich hoffe jemand kann mir bei diesem Problem helfen.
6 Antworten
Dies liegt daran, dass das Häkchen Inline-Inhalt ist. Wenn der Text umbrochen wird, wird es wie gewohnt weiter fließen.
Sie können dieses Verhalten stoppen, indem Sie text-indent :
Die text-indent-Eigenschaft gibt an, wie viel horizontaler Abstand vor dem Anfang der ersten Zeile des Textinhalts eines Elements verbleiben soll.
Texteinzug ( Ссылка )
Wenn Sie ein negatives text-indent angeben, können Sie der ersten Zeile mitteilen, dass ein gewünschter Betrag nach links verschoben werden soll. Wenn Sie dann eine positive padding-left angeben, können Sie diesen Offset abbrechen.
Im folgenden Beispiel wird ein Wert von 1.28571429em verwendet, da es sich bei width um den .fa-fw by font-awesome handelt.
Sie können "display: table" als Stil für li verwenden und innen einen Bereich mit "display: table-cell" -Stil erzeugen. Oder erstellen Sie eine entsprechende Klasse. So:
%Vor% Sie können Ihren Text in div und float:left in Ihre innere li und div einfügen.
Tags und Links html css html-lists font-awesome