2 行目のリスト項目を 2 行目の位置を揃えるにはどうすればよいですか?

2 行の項目。 2 行目に余白なし

2 行目にまたがるリスト項目を扱う場合、2 行目が 1 行目と整列していない場合、整列を実装する必要があります。この状況は主に、リスト内のインライン要素により、配置に影響を与えることなく後続のテキストが流れることができるために発生します。

この問題に対処するには、「text-indent」プロパティを利用することが可能です。このプロパティは、要素内のテキストの最初の行の開始前の間隔を制御します。負の 'text-indent' 値を適用すると、最初の行を左に特定の量だけシフトできます。この変位を正の「padding-left」値でオフセットすると、目的の配置が得られます。

次の例を考えてみましょう。

ul {
  width: 300px;
}
li {
  padding-left: 1.28571429em;
  text-indent: -1.28571429em;
}

この例では、「1.28571429em」値は、チェックマークの原因となる「font-awesome」アイコン要素の幅に対応します。この手法を採用すると、テキストが両行のアイコンの下に整列し、ずれが修正されます。

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