CSS をリセットすると箇条書きリストの 2 行目の位置がずれるのはなぜですか?どうすれば修正できますか?

CSS リセット後の箇条書きリスト項目の 2 行目のテキストの配置

問題の説明:

CSS リセットを実装した後、テキストの 2 行目が表示されるという書式設定の問題が発生する可能性があります。箇条書きリストの項目は箇条書きの下から始まります。これは list-style-position プロパティのデフォルト設定が原因で、箇条書きがリスト項目内に配置され、テキストがその周囲を回り込むことになります。

解決策:

この問題を解決し、テキストの 2 行目を箇条書きの左端に揃えるには、li の list-style-position プロパティを外側に設定する必要があります。要素:

ul li {
  list-style-position: outside;
}

この変更により、箇条書きがリスト項目の外側に移動し、テキストが項目の幅全体に広がるようになります。

理由:

list-style-position を外側に設定すると、箇条書きのデフォルトの動作が変更され、リスト項目内に配置されます。箇条書きを外側に配置すると、テキストは左端からアイテムの全幅を占めるようになります。

追加の考慮事項:

• マージン調整: 必要に応じて、リスト項目に左マージンを適用して、リスト項目のメインテキストと揃えることができます。 page.
• インデント: 視覚的なインデントを維持するには、ul 要素で margin-left プロパティを使用し、個々のリスト項目ではなくリスト全体をインデントすることをお勧めします。
• 編集の改善: 回答は、最初の提出以来、より包括的で効果的な回答を提供するために洗練され、強化されました。解決策。

以上がCSS をリセットすると箇条書きリストの 2 行目の位置がずれるのはなぜですか?どうすれば修正できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。