web-dev-qa-db-ja.com

HTML順序リスト1.1、1.2（ネストされたカウンターとスコープ）が機能しない

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

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/

htmlcsshtml-lists
65
dirk

「CSSの正規化」のチェックを外します- http://jsfiddle.net/qGCUk/3/ その中で使用されるCSSリセットは、デフォルトですべてのリストのマージンとパディングを0にします

UPDATEhttp://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>
76
Zoltan Toth

このスタイルを使用して、ネストされたリストのみを変更します。

ol {
    counter-reset: item;
}

ol > li {
    counter-increment: item;
}

ol ol > li {
    display: block;
}

ol ol > li:before {
    content: counters(item, ".") ". ";
    margin-left: -20px;
}
49
Moshe Simantov

これをチェックしてください：

http://jsfiddle.net/PTbGc/

問題は修正されたようです。

表示されるもの（ChromeおよびMac OS Xの下）

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

どうやってやった

の代わりに：

<li>Item 1</li>
<li>Item 2</li>
   <ol>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
   </ol>

Do：

<li>Item 1</li>
<li>Item 2
   <ol>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
   </ol>
</li>
13
Dr.Kameleon

これは素晴らしい解決策です！いくつかの追加のCSSルールを使用して、MS Wordアウトラインリストのように、ぶら下げて最初の行のインデントを設定できます。

OL { 
  counter-reset: item; 
}
LI { 
  display: block; 
}
LI:before { 
  content: counters(item, ".") "."; 
  counter-increment: item; 
  padding-right:10px; 
  margin-left:-20px;
}
6
ChaosFreak

最近、同様の問題に遭遇しました。修正は、順序付きリストのliアイテムの表示プロパティをlist-itemに設定し、ブロックを表示せず、olの表示プロパティがlist-itemでないことを確認することです。すなわち

li { display: list-item;}

これにより、htmlパーサーはすべてのliをリストアイテムとして認識し、適切な値を割り当て、設定に基づいてインラインブロックまたはブロック要素としてolを認識し、カウント値を割り当てようとしません。それ。

2
Babatunde Calebs