複数行のリスト項目で位置がずれている 2 行目を修正するにはどうすればよいですか?

2 行の Li 項目: 2 行目の不整列への対処

順序なしリストを使用する場合、リストがitem が 2 行目に折り返され、2 行目が最初の行からオフセットされます。この位置のずれにより、リストの見た目の美しさが損なわれる可能性があります。

この例では、リストの作成に次の HTML コードが使用されています。

<ul>
  <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 行目の位置がずれます。

この問題を解決するには、水平方向の残りのスペースの量を指定する text-indent プロパティを利用できます。要素内のテキストの最初の行の前。負の text-indent 値を設定すると、最初の行を左にシフトして、後続の行と揃えることができます。

li {
  text-indent: -1.28571429em;
}

負のインデントを補うために、行に正のパディングを適用できます。 element:

li {
  padding-left: 1.28571429em;
}

これらのスタイルを適用すると、リスト項目の 2 行目を最初の行と揃えることができ、より一貫したビジュアルが得られます。プレゼンテーション。

以上が複数行のリスト項目で位置がずれている 2 行目を修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。