Li-Artikel in zwei Zeilen. Zweite Zeile hat keinen Rand

Question

Ich arbeite derzeit an einer ungeordneten Liste mit Listenelementen mit Taglines. Ich habe ein Problem in Bezug auf ein Listenelement, die lang genug ist, zwei Linien zu nehmen (siehe Bild)

Ich will 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.

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   zwischen ‚2‘ und ‚Linien‘ eingeben, aber das scheint wie eine wirklich schlechte Praxis zu mir. Ich hoffe, dass mir jemand mit diesem Problem helfen kann.

Answer 1

Dies liegt daran, die Zecke Inline-Inhalt ist so, wenn der Text umbrochen wird es wie gewohnt weiterfließen zu.

können Sie dieses Verhalten stoppen durch die Nutzung von text-indent nehmen: der Textinhalt eines Elements

Der text-indent-Eigenschaft gibt an, wie viel sollte horizontalen Raum vor dem Beginn der ersten Zeile gelassen werden.

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

Durch eine negative text-indent Versorgung kann man die erste Zeile sagen einen gewünschten Betrag nach links zu verschieben. 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 um den .fa-fw von font-awesome handelt.

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>

Answer 2

können Sie Ihren Text in eine div setzen und float:left zu Ihrem inneren li und div geben.

Answer 3

Sie können einfach diese zu Ihrem ul hinzufügen:

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

JSFIDDLE

Answer 4

Sie könnten die Kontrolle aus dem Seitenfluss entfernen, indem sie mit position:absolute

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>

Answer 5

Einstellung Ich fand dies nicht zuverlässig über alle funktioniert Browser und Geräte.

Dieser Code funktioniert:

ul li { 
    /* 
    * We want the bullets outside of the list, 
    * so the text is aligned. Now the actual bullet 
    * is outside of the list’s container 
    */ 
    list-style-position: outside; 

    /* 
    * Because the bullet is outside of the list’s 
    * container, indent the list entirely 
    */ 
    margin-left: 1em; 
} 

Original answer

Answer 6

können Sie "display: table" als Stil für li, und innerhalb einer Spanne erstellen mit "display: table-cell" Styling. Oder erstellen Sie eine entsprechende Klasse. Gefällt mir:

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