Wollten Sie schon immer die zweite Zeile eines Listenelements einrücken, anstatt dass es direkt unter dem Aufzählungspunkt angezeigt wird? Dies ist wahrscheinlich, warum Sie hier sind und unten ist wahrscheinlich das Ergebnis, das Sie suchen:
Heute zeigen wir Ihnen einen einfachen Weg, dies zu tun.
Der Grund dafür ist, dass das Häkchen Inline-Inhalt ist, sodass der Text beim Umbrechen weiterhin wie gewohnt fließt.
Sie können dieses Verhalten stoppen, indem Sie text-indent:
Die Eigenschaft text-indent gibt an, wie viel horizontaler Abstand vor dem Beginn der ersten Zeile des Textinhalts eines Elements verbleiben soll.
Durch Angabe eines negativen Texteinzugs können Sie der ersten Zeile mitteilen, dass sie einen gewünschten Betrag nach links verschieben soll. Wenn Sie dann ein positives padding-left angeben, können Sie diesen Offset aufheben.
Im folgenden Beispiel ein Wert von 20px:-
ul { list-style: none; width: 200px; text-indent: -20px; /* key property */ margin-left: 20px; /* key property */ }li { margin-bottom: 10px; }Und da haben Sie es, hier ist ein CodePen der oben genannten in Aktion.