HTML でネストされた順序付きリストの番号付けの問題を修正する方法

HTML 順序付きリスト: ネストされたカウンターとスコープの問題

HTML では、CSS カウンターとスコープを使用すると、構造化された順序付きリストの作成に役立ちます。ただし、これらのカウンターをネストしようとすると、問題が発生することがあります。

問題

カウンターを使用してネストされた順序付きリストを設定する場合、子リストで不正な番号付けが発生する場合があります。 。予想されるネストされた構造ではなく、親リストに戻ったときに、番号付けが親リストから増分的に継続される可能性があります。

解決策

この問題に対処するには、正規化CSSが無効になっています。古いブラウザでは、この CSS リセットによってリストのすべてのマージンとパディングがゼロに設定されることが多く、配置の問題が発生します。あるいは、メインの

内にサブリストをネストすることもできます。要素によって問題を解決できます。

例

<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 サイトの他の関連記事を参照してください。