BinaryDevelop
  1. ホーム
  2. html

[解決済み] Html ordered list 1.1, 1.2 (Nested counters and scope) not working

2022-10-19 07:56:01

質問

ネストされたカウンタとスコープを使用して、順序付きリストを作成します。 

ol {
    counter-reset: item;
    padding-left: 10px;
}
li {
    display: block
}
li:before {
    content: counters(item, ".") " ";
    counter-increment: item
}

<ol>
    <li>one</li>
    <li>two</li>
    <ol>
        <li>two.one</li>
        <li>two.two</li>
        <li>two.three</li>
    </ol>
    <li>three</li>
    <ol>
        <li>three.one</li>
        <li>three.two</li>
        <ol>
            <li>three.two.one</li>
            <li>three.two.two</li>
        </ol>
    </ol>
    <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 <!-- this is where it goes wrong, when going back to the parent -->
  2.1 three.one
  2.2 three.two
    2.2.1 three.two.one
    2.2.2 three.two.two
2.3 four

全く分からないのですが、どこが悪いのか分かる方いらっしゃいますか？

以下はJSFiddleです。 http://jsfiddle.net/qGCUk/2/

どのように解決するのですか？

正規化CSSのチェックを外す。 http://jsfiddle.net/qGCUk/3/ この CSS リセットでは、リストのマージンやパディングがすべて 0 に設定されます。

アップデイト http://jsfiddle.net/qGCUk/4/ - サブリストをメインの <li> 

ol {
  counter-reset: item
}
li {
  display: block
}
li:before {
  content: counters(item, ".") " ";
  counter-increment: item
}

<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>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します