CSS リセット後に順序なしリストの位置ずれした 2 行目を修正する方法

CSS リセット後の ul リストの 2 行目の配置を解決する

CSS リセットを適用した後、リスト項目のテキストの 2 行目が下で始まるという問題が発生する場合があります。弾丸。この不整合は、CSS を通じて list-style-position プロパティを調整することで解決できます。

解決策:

list-style-position プロパティは、箇条書きがリストの内側に表示されるか外側に表示されるかを決定します。デフォルトでは「内側」に設定されており、テキストが箇条書きの周囲に回り込みます。これを「外側」に変更すると、テキストがリストの残りの部分と強制的に揃えられます。

ただし、これにより、箇条書きとリストの外側のテキストの間の位置がずれる可能性があります。これに対処するには、リスト項目にマージンを適用します:

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

改善された解決策 (2014 年 3 月更新):

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

• この解決策は、すべてのプロパティを ul 要素に適用します。 .
• em 単位はインデントに使用され、クロスプラットフォームでの一貫性が確保されます。
• 明確かつ簡潔なコメントにより、各プロパティの目的が説明されています。

以上がCSS リセット後に順序なしリストの位置ずれした 2 行目を修正する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。