web-dev-qa-db-ja.com

2行のLiアイテム。 2行目にはマージンがありません

現在、タグライン付きのリストアイテムを含む順序付けられていないリストで作業しています。 1つのリスト項目に関して問題があります。これは2行を使用するのに十分な長さです（画像を参照）

enter image description here

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」と「行」の間に複数の&nbsp;を入力しようとしましたが、それは私にとって本当に悪い習慣のようです。誰かがこの問題を解決してくれることを願っています。

htmlcsshtml-listsfont-awesome
17
Kevin Groen

これは、目盛りがインラインコンテンツであるため、テキストが折り返されても通常どおりフローが継続するためです。

text-indentを利用して、この動作を停止できます。

Text-indentプロパティは、要素のテキストコンテンツの最初の行の先頭の前に残す水平スペースの量を指定します。

text-indent（ https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent ）

負のtext-indentを指定することにより、最初の行に希望の量を左にシフトするように指示できます。その後、正のpadding-leftを指定すると、このオフセットをキャンセルできます。

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

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>
29
Hidden Hobbes

これをulに追加するだけです：

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

[〜＃〜] jsfiddle [〜＃〜]

6
Alvaro Menéndez

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>
3
Danield

Liのスタイルとして「display：table」を使用でき、内部で「display：table-cell」スタイルのスパンを作成できます。または、対応するクラスを作成します。このような：

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

テキストをdivに入れて、float:leftを内側のliおよびdivに追加します。

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

パディングとテキストインデントを追加します-テキストをli：beforeから移動します。

0
m b k