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/ 使用的 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>

于 2012-05-01T23:55:36.417 回答
73

使用此样式仅更改嵌套列表：

ol {
    counter-reset: item;
}

ol > li {
    counter-increment: item;
}

ol ol > li {
    display: block;
}

ol ol > li:before {
    content: counters(item, ".") ". ";
    margin-left: -20px;
}
于 2015-05-19T13:18:26.650 回答
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 回答
3

把事情简单化！

增加数字并在末尾保留点的更简单和标准的解决方案。即使您的 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 父子

如果添加孩子，请确保它在 parent 之下li。

不会工作✘</h3>

请注意，父母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>

会工作✔</h3>

您需要将ol li子元素放在 parent 内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>

于 2020-11-17T03:32:57.903 回答
1

我最近遇到了类似的问题。解决方法是将有序列表中的li项的显示属性设置为list-item，而不是显示块，并确保ol的显示属性不是list-item。IE

li { display: list-item;}

这样，html 解析器将所有 li 视为列表项并为其分配适当的值，并将 ol 视为基于您的设置的 inline-block 或块元素，并且不会尝试分配任何计数值它。

于 2016-02-08T23:37:04.873 回答
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>

您还可以将计数器重置设置为 on li:before。

于 2020-05-13T11:49:15.043 回答
1

在经历了其他答案后，我想出了这个，只需将类nested-counter-list应用于根ol标签：

萨斯代码：

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>

于 2020-07-16T16:58:54.140 回答
0

谢谢楼上各位的解答！

由于我需要 RTL 解决方案，我发现这可以解决它：

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

因此，您可以使用上述任何解决方案，但也要为 RTL 案例更新特定的 CSS 选择器。

于 2022-01-23T17:49:59.527 回答