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

2 行目で整列された 2 行の項目

順序なしリストでは、2 行にまたがる長いリスト項目に遭遇することがあります。しかし、2 行目は最初の行と整列していません。この位置ずれを解決するには、text-indent プロパティを利用します。

text-indent プロパティは、要素内のテキスト コンテンツの最初の行の前の水平方向のスペースを指定します。負の text-indent 値を指定すると、最初の行を左に一定量シフトできます。このオフセットのバランスをとるには、正のパディング左値を適用します。

提供されたコード例では、.fa-fw クラスの幅は 1.28571429em です。 2 行目を揃えるために、li 要素の text-indent を -1.28571429em に設定し、padding-left を 1.28571429em に設定します。これによりオフセットが相殺され、2 行目が左揃えになります。

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

このソリューションを実装すると、長いリスト項目の 2 行目が最初の行と整列し、視覚的にバランスのとれた順序なしリストが作成されます。

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