Html 有序列表 1.1、1.2（嵌套計數器和范圍）不起作用

Question

我使用嵌套計數器和 scope 創建有序列表：

 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/

Answer 1

取消選中“規范化 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>

Answer 2

使用此樣式僅更改嵌套列表：

ol {
    counter-reset: item;
}

ol > li {
    counter-increment: item;
}

ol ol > li {
    display: block;
}

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

Answer 3

看一下這個 ：

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>

Answer 4

這是一個很好的解決方案！ 使用一些額外的 CSS 規則，您可以將其格式化，就像帶有懸掛首行縮進的 MS Word 大綱列表一樣：

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

Answer 5

把事情簡單化！

增加數字並在末尾保留點的更簡單和標准解決方案。 即使你的 css 正確，如果你的 HTML 不正確，它也不會工作。 見下文。

CSS

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

SASS

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

HTML 父子

如果您添加孩子，請確保它在父li之下。

不會用 ✘

注意這里的父li和子ol li是單獨的，這不起作用。

<ol>
    <li>Parent 1</li> <!-- Parent has open and close li tags -->
    <ol> 
        <li>Child</li>
    </ol>
    <li>Parent 2</li>
</ol>

會工作✔

您需要將ol li子元素放在父li 。 注意父母li正在擁抱孩子。

<ol>

    <li>Parent 1 <!-- Parent open li tag -->
        <ol> 
            <li>Child</li>
        </ol>
    </li> <!-- Parent close li tag -->

    <li>Parent 2</li>
</ol>

Answer 6

我最近遇到了類似的問題。 解決方法是將有序列表中li項的顯示屬性設置為list-item，而不是顯示塊，並確保ol的顯示屬性不是list-item。 IE

li { display: list-item;}

有了這個，html 解析器將所有 li 視為列表項並為其分配適當的值，並將 ol 視為基於您的設置的內聯塊或塊元素，並且不會嘗試分配任何計數值它。

Answer 7

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上設置計數器重置。

Answer 8

在通過其他答案之后，我想出了這個，只需將類nested-counter-list應用於根ol標記：

sass代碼：

ol.nested-counter-list {
  counter-reset: item;

  li {
    display: block;

    &::before {
      content: counters(item, ".") ". ";
      counter-increment: item;
      font-weight: bold;
    }
  }

  ol {
    counter-reset: item;

    & > li {
      display: block;

      &::before {
        content: counters(item, ".") " ";
        counter-increment: item;
        font-weight: bold;
      }
    }
  }
}

css代碼：

ol.nested-counter-list {
  counter-reset: item;
}
ol.nested-counter-list li {
  display: block;
}
ol.nested-counter-list li::before {
  content: counters(item, ".") ". ";
  counter-increment: item;
  font-weight: bold;
}
ol.nested-counter-list ol {
  counter-reset: item;
}
ol.nested-counter-list ol > li {
  display: block;
}
ol.nested-counter-list ol > li::before {
  content: counters(item, ".") " ";
  counter-increment: item;
  font-weight: bold;
}

 ol.nested-counter-list { counter-reset: item; } ol.nested-counter-list li { display: block; } ol.nested-counter-list li::before { content: counters(item, ".") ". "; counter-increment: item; font-weight: bold; } ol.nested-counter-list ol { counter-reset: item; } ol.nested-counter-list ol>li { display: block; } ol.nested-counter-list ol>li::before { content: counters(item, ".") " "; counter-increment: item; font-weight: bold; }

 <ol class="nested-counter-list"> <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>

如果您需要尾隨. 在嵌套列表的計數器的末尾使用這個：

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

 <ol class="nested-counter-list"> <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>

Answer 9

謝謝樓上各位的解答！

由於我需要 RTL 解決方案，我發現這可以解決它：

ol.nested-counter-list li {
  display: block;
  unicode-bidi: bidi-override;
}

因此，您可以使用上述任何解決方案，但也要為 RTL 案例更新特定的 CSS 選擇器。

Answer 10

我認為這些答案過於復雜了。 如果您不需要支持 Internet Explorer，那么解決方案是單線：

 ol > li::marker { content: counters(list-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>

有關更多信息，請參閱 MDN 的 CSS 參考網站上的::marker CSS 偽元素頁面和使用 CSS 計數器頁面。