HTML でネストされた順序付きリストに正しく番号を付けるにはどうすればよいですか?

カウンターとスコープを使用したネストされた順序付きリスト (1.1、1.2) の謎の解明

カウンターを使用した階層構造内のネストされた順序付きリストのカプセル化そしてその範囲は大変な仕事になる可能性があります。開発者が遭遇する難問の 1 つは、これらのリスト内の番号付けの誤りです。この記事の目的は、この課題の背後にある複雑さを明らかにし、シームレスな解決策への道を明らかにすることです。

問題

ネストされたサブを持つ順序付きリストを作成しようとする試み-リストの場合、開発者は番号付けの予期しない逸脱に遭遇します:

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

ただし、望ましい結果は次のとおりです。

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

解決策

この謎を解決するには、2 つの重要な考慮事項が発生します。

1. CSS 正規化を無効にする

多くの場合、正規化に使用される CSS ルールセットは、リストに適用されるデフォルトのマージンとパディングを取り除きます。これにより、ネストされたリストの意図した間隔が崩れる可能性があります。このような干渉を防ぐには、CSS 正規化オプションを無効にします。

2.サブリストのカプセル化

適切な列挙を保証するには、各サブリストをその親リスト項目内で囲む必要があります。提供された 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>

これらの問題に対処することで、開発者は正確な番号付けを維持しながら、ネストされたサブリストを含む順序付きリストを効果的に構築できます。

以上がHTML でネストされた順序付きリストに正しく番号を付けるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。