109

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

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/

4

9 に答える 9

120

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

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

于 2012-05-01T23:55:36.417 に答える
16

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

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>

行う ：

<li>Item 1</li>
<li>Item 2
   <ol>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
   </ol>
</li>
于 2012-05-02T00:00:50.987 に答える
8

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

OL { 
  counter-reset: item; 
}
LI { 
  display: block; 
}
LI:before { 
  content: counters(item, ".") "."; 
  counter-increment: item; 
  padding-right:10px; 
  margin-left:-20px;
}
于 2013-07-11T17:23:54.277 に答える
1

Mosheのソリューションは素晴らしいですが、リストをdiv. (読み取り:ネストされたリストの CSS カウンターリセット)

このスタイルは、その問題を防ぐことができます:

ol > li {
    counter-increment: item;
}

ol > li:first-child {
  counter-reset: item;
}

ol ol > li {
    display: block;
}

ol ol > li:before {
    content: counters(item, ".") ". ";
    margin-left: -20px;
}
<ol>
  <li>list not nested in div</li>
</ol>

<hr>

<div>
  <ol>
  <li>nested in div</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>
</div>

カウンターリセットをオンに設定することもできますli:before。

于 2020-05-13T11:49:15.043 に答える