入れ子になった HTML の順序付きリストの番号付けで予期しない結果が生じる場合があるのはなぜですか?

入れ子になったカウンターとスコープに関する HTML 順序付きリストの番号付けの問題

HTML では、入れ子になったカウンターとスコープを使用すると、マルチレベルの作成が可能になります各レベルに個別の番号が付けられた順序付きリスト。ただし、この手法を組み込むと、ユーザーは間違った番号付けに遭遇する可能性があります。

問題の説明

ネストされた順序付きリストを生成することを目的とした次の HTML コードを考えてみましょう。

<ol>
    <li>one</li>
    <li>two
        <ol>
            <li>two.one</li>
            <li>two.two</li>
            <li>two.three</li>
        </ol>
    </li>
    <li>three
        <ol>
            <li>three.one</li>
            <li>three.two
                <ol>
                    <li>three.two.one</li>
                    <li>three.two.two</li>
                </ol>
            </li>
        </ol>
    </li>
    <li>four</li>
</ol>

期待される結果は、次のような適切に番号付けされたリストです。次のとおりです:

1. one
2. two
  2.1. two.one
  2.2. two.two
  2.3. two.three
3. three
  3.1 three.one
  3.2 three.two
    3.2.1 three.two.one
    3.2.2 three.two.two
4. four

ただし、表示される出力には間違った番号が表示されます:

1. one
2. two
  2.1. two.one
  2.2. two.two
  2.3. two.three
2.4 three (Incorrect)
  2.1 three.one
  2.2 three.two
    2.2.1 three.two.one
    2.2.2 three.two.two
2.3 four

解決策

この問題を解決するには、次のことを検討してください。アプローチ:

「正規化」のチェックを外しますCSS":

一部の開発ツールにある「CSS の正規化」オプションは、リストのマージンやパディングなどの CSS プロパティをリセットします。このオプションを無効にすると、意図したマージンとパディングが保持され、正しい番号付けが可能になります。

メインにサブリストを含める

:

すべてのサブを囲むメイン リスト項目 (

) 内の -lists により、明確な階層関係が保証されます。これにより、誤ったグループ化が防止され、番号付けが正しく適用されます。

以上が入れ子になった HTML の順序付きリストの番号付けで予期しない結果が生じる場合があるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。