wake-up-neo.com

Li Artikel in zwei Zeilen. Die zweite Zeile hat keine Marge

Ich arbeite gerade an einer ungeordneten Liste, die Listenelemente mit Taglines enthält. Ich habe ein Problem mit einem Listenelement, das lang genug ist, um zwei Zeilen aufzunehmen (siehe Bild).

 enter image description here

Ich möchte, 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.

ul {
  width: 300px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul class="fa-ul custom-list">
  <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>

Ich habe bereits versucht, mehrere &nbsp; zwischen '2' und 'Zeilen' einzugeben, aber das scheint mir eine wirklich schlechte Praxis zu sein. Ich hoffe jemand kann mir bei diesem Problem helfen.

14
Kevin Groen

Dies ist darauf zurückzuführen, dass das Häkchen Inline-Inhalt ist. Wenn der Text umgebrochen wird, wird er wie gewohnt weiterfließen.

Sie können dieses Verhalten unterbinden, indem Sie text-indent nutzen:

Die Eigenschaft text-indent gibt an, wie viel horizontaler Abstand vor dem Beginn der ersten Zeile des Textinhalts eines Elements verbleiben soll.

text-indent ( https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent )

Durch Angabe eines negativen text-indent können Sie der ersten Zeile mitteilen, dass sie den gewünschten Betrag nach links verschieben soll. Wenn Sie dann einen positiven padding-left angeben, können Sie diesen Offset aufheben.

Im folgenden Beispiel wird der Wert 1.28571429em verwendet, da es sich um die width handelt, die in .fa-fw von font-awesome festgelegt ist.

ul {
  width: 300px;
}
li {
    padding-left: 1.28571429em;
    text-indent: -1.28571429em;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul class="fa-ul custom-list">
    <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>

24
Hidden Hobbes

sie können dies einfach zu Ihrem ul hinzufügen:

ul {
text-indent:-20px; 
margin-left:20px;
}

JSFIDDLE

5

Sie können das Auschecken aus dem Seitenfluss entfernen, indem Sie sie mit position:absolute festlegen.

ul {
  width: 300px;
}
.fa-fw {
  position: absolute;
  left: -22px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<ul class="fa-ul custom-list">
  <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>

3
Danield

Sie können "display: table" als Stil für li verwenden und innen einen Bereich mit "display: table-cell" -Stil erstellen. Oder entsprechende Klasse erstellen. So was:

<li style="display:table"><span style="display:table-cell">text with 
all lines indented</span></li>
2
Hanna Howz

sie können Ihren Text in eine div setzen und Ihrer inneren li und divfloat:left geben.

1
Majid Sadr
ul li{
padding: 10px 0 10px 20px;
text-indent: -1em;
}

padding und Texteinzug hinzufügen - das verschiebt den Text vom li: before.

0
m b k