リスト項目の 2 行目が箇条書きの横ではなく箇条書きの下にインデントされるのはなぜですか?

箇条書きの後のリスト項目の 2 行目のインデント

この質問では、CSS を適用した後、ユーザーがリスト内のテキストを揃えるのが困難になります。リセット。具体的には、各リスト項目のテキストの 2 行目は、箇条書きに沿ってインデントされるのではなく、箇条書きの下で始まります。

この問題は、li タグの list-style-position プロパティが原因で発生します。デフォルトでは、このプロパティは「内側」に設定されており、これによりテキストが箇条書きの周囲に回り込みます。テキストを正しく配置するには、list-style-position を「外側」に設定する必要があります。

ただし、これにより新たな問題が発生します。箇条書きがリスト コンテナの外側になってしまいます。これに対処するには、リストに左マージンのインデントを適用して、箇条書きをリストの外側のテキストと揃えることができます。

CSS ソリューションは次のとおりです。

ul {
  list-style-position: outside;
  margin-left: 1em;
}

このコードは、リスト スタイルの位置を「外側」に設定して箇条書きに沿ってテキストを配置し、リストにインデントを適用してページ上の他のテキストと配置します。

以上がリスト項目の 2 行目が箇条書きの横ではなく箇条書きの下にインデントされるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。