Li項目は2行にあります。 2行目に余白がありません

Question

現在、タグラインを持つリスト項目を含む順序付けられていないリストに取り組んでいます。私は2番目の行は最初の行と一致するように、私はそれをしたい

（画像を参照）の2行を取るのに十分な長さ1つのリスト項目、関連する問題を抱えています。これは私が使っているHTMLコードです。私は、チェック画像にfontAwesomeを使用しました。

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>

私はすでに「2」と「ライン」の間で複数の を入力しようとしたが、それは私には本当に悪い習慣のように思えます。誰かが私にこの問題を助けてくれることを願っています。

Answer 1

ダニはテキストが折り返されたときにそれがいつものように流れ続けるインラインコンテンツであるためです。

あなたはtext-indentを利用することによって、この動作を停止することができます：

テキストインデントプロパティは、水平方向のスペースは、要素のテキストコンテンツの最初の行の開始前に残されるべきどのくらいを指定します。

テキストインデント（https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent）

負text-indentを供給することにより、あなたは左に所望の量をシフトする最初の行を伝えることができます。プラスの値を指定した場合は、このオフセットをキャンセルすることができます。

1.28571429emの値はwidthがfont-awesomeによって.fa-fwに設定されているために使用されます。

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

divにテキストを入力し、を内面liとdivに入力します。

Answer 3

あなたは自分のULにこれを追加することができます。

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

JSFIDDLE

Answer 4

あなたは、私はこれがすべてにわたって確実に動作しません見つけ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

でそれらを設定することにより、ページフローのうち、チェックを外すことができブラウザとデバイス。

このコードではありません：李のスタイルとして、そして内部の「表示：テーブルセル」とスパンを作成スタイリング：あなたは「テーブル表示」を使用することができます

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

を。または対応するクラスを作成します。このように：

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