2 行のリスト項目の 2 行目のマージンを削除するにはどうすればよいですか?

2 行の Li 項目: 2 行目のマージンの削除

順序なしリストでは、ユーザーはリスト項目が長くなってしまうという問題に遭遇することがよくあります。複数の行にまたがり、不均一な外観を作り出します。この問題は、2 行目の位置がずれており、1 行目のマージンを超えてはみ出している場合に発生します。この問題を解決するには、CSS プロパティ「text-indent」と「padding-left」を利用します。

Text-Indent と Padding-Left について

「text-indent」は、要素内のテキストの最初の行の前に残す水平方向のスペースの量を指定します。負の値を指定すると、1 行目を左にシフトできます。逆に、「padding-left」は要素の左端とそのコンテンツの間のスペースを制御します。正の値を適用すると、インデントをオフセットできます。

ソリューションの実装

2 行目を最初の行と揃えるには、次の CSS コードを使用します。

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

「1.28571429em」の値は幅に対応するため重要です。 「font-awesome」で利用されるチェックマークアイコンの。負の "text-indent" を設定し、正の "padding-left" でキャンセルすると、リスト項目のテキストはチェックマークの位置を維持したまま左にシフトされます。

結論

この手法により、リスト項目を配置を損なうことなく垂直方向に拡張できます。 「text-indent」と「padding-left」プロパティを調整することで、開発者は順序なしリストの外観を微調整し、見た目の美しさを向上させることができます。

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