HTML中的数字嵌套有序列表答案

【问题标题】：Number nested ordered lists in HTMLHTML中的数字嵌套有序列表
【发布时间】：2014-11-02 05:26:52
【问题描述】：

我有一个嵌套的有序列表。

<ol>
  <li>first</li>
  <li>second
  <ol>
    <li>second nested first element</li>
    <li>second nested secondelement</li>
    <li>second nested thirdelement</li>
  </ol>
  </li>
  <li>third</li>
  <li>fourth</li>
</ol>

目前嵌套元素再次从 1 开始，例如

首先
第二
1. 第二个嵌套的第一个元素
2. 第二个嵌套的第二个元素
3. 第二个嵌套的第三个元素
第三
第四个

我想要的是第二个元素的编号如下：

首先
秒

2.1。第二个嵌套的第一个元素

2.2。第二个嵌套的第二个元素

2.3。第二个嵌套第三个元素
第三
第四个

有没有办法做到这一点？

【问题讨论】：

你需要支持哪些浏览器？
是否需要额外的代码才能做到这一点，例如Javascript 还是 Ajax？我希望有一个参数或 css 元素可以传入列表。我看到你可以使用参数类型，但这只是改变了我所看到的数字类型
Can ordered list produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, ...) with css?的可能重复

标签： jquery html css html-lists

【解决方案1】：

这是一个适用于所有浏览器的示例。纯 CSS 方法适用于真正的浏览器（即除 IE6/7 之外的所有浏览器），jQuery 代码用于覆盖不受支持的部分。它类似于SSCCE，您可以直接复制'n'paste'n'运行它而无需更改。

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2729927</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                if ($('ol:first').css('list-style-type') != 'none') { /* For IE6/7 only. */
                    $('ol ol').each(function(i, ol) {
                        ol = $(ol);
                        var level1 = ol.closest('li').index() + 1;
                        ol.children('li').each(function(i, li) {
                            li = $(li);
                            var level2 = level1 + '.' + (li.index() + 1);
                            li.prepend('<span>' + level2 + '</span>');
                        });
                    });
                }
            });
        </script>
        <style>
            html>/**/body ol { /* Won't be interpreted by IE6/7. */
                list-style-type: none;
                counter-reset: level1;
            }
            ol li:before {
                content: counter(level1) ". ";
                counter-increment: level1;
            }
            ol li ol {
                list-style-type: none;
                counter-reset: level2;
            }
            ol li ol li:before {
                content: counter(level1) "." counter(level2) " ";
                counter-increment: level2;
            }
            ol li span { /* For IE6/7. */
                margin: 0 5px 0 -25px;
            }
        </style>
    </head>
    <body>
        <ol>
            <li>first</li>
            <li>second
                <ol>
                    <li>second nested first element</li>
                    <li>second nested second element</li>
                    <li>second nested third element</li>
                </ol>
            </li>
            <li>third</li>
            <li>fourth</li>
        </ol>
    </body>
</html>

【讨论】：

能否更改此解决方案以便使用 JQuery 应用样式？如果是这样，那么这是否适用于所有浏览器？
@John：好的，我加了。但是，它不适用于禁用 JS 的 IE6/7 :)
如果我有超过 2 个级别，我该如何让它工作？比如说，有 5 个级别？
啊，它也不适用于段落。假设您在一个列表元素中有多个段落。没有
善良，只有
有效。
添加一个类来识别需要这种特殊编号的列表会很有帮助，以避免潜在的冲突。如下图所示，可以使用不同的样式方法来容纳更多级别 - 我想可以重新设计 jQuery 代码以使用递归，因此它可以与任意数量的级别一起使用，尽管采用某种形式的截断可能是明智的以防万一。

【解决方案2】：

我知道回复晚了，但我刚刚找到了example 使用 CSS 来做这件事。将此添加到您的 CSS 部分（或文件）：

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

下面是您的列表代码的示例：

<ol class="nested">
<li class="nested">item 1</li>
<li class="nested">item 2
    <ol class="nested">
        <li class="nested">subitem 1</li>
        <li class="nested">subitem 2</li>
    </ol></li>
<li class="nested">item 3</li>
</ol>

HTH

【讨论】：

看起来链接已经失效，但这个例子也可以从 Opera 获得：dev.opera.com/articles/view/…
谢谢，太好了！比使用 jQuery 简单得多！该解决方案具有解释多个嵌套的优势！ 1 -> 1.1 -> 1.1.1 -> 1.1.1.1 而 jQuery 解决方案上升到 1.1

【解决方案3】：

此页面上的任何解决方案都不能正确且普遍地适用于所有级别和长（换行）段落。由于标记的大小可变（1., 1.2, 1.10, 1.10.5, ...），要实现一致的缩进真的很棘手；它不能只是“伪造”，即使每个可能的缩进级别都有预先计算的边距/填充。

我终于找到了一个实际可行并且不需要任何 JavaScript 的解决方案。

已在 Firefox 32、Chromium 37、IE 9 和 Android 浏览器上进行了测试。不适用于 IE 7 及更早版本。

CSS：

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol > li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;    
}

li ol > li {
  margin: 0;
}

li ol > li:before {
  content: counters(item, ".") " ";
}

示例：

在jsFiddle 上试用，在Gist 上分叉。

【讨论】：

【解决方案4】：

稍作调整，您应该能够适应 the technique used here（在第二个示例中）来创建顺序列表。

【讨论】：

【解决方案5】：

~~这在纯 HTML/CSS 中是不可能的。~~请参阅 BalusC 的回答，了解一个很好的开箱即用的解决方案。编号类型列表可以在w3schools, here 找到。

我能找到的最接近的选项是use of the value attribute, from w3c，但以下标记

<ol>
    <li value="30">
        makes this list item number 30.
    </li>
    <li value="40">
        makes this list item number 40.
    </li>
    <li>
        makes this list item number 41.
    </li>
    <li value="2.1">
        makes this list item number ...
    </li>
    <li value="2-1">
        makes this list item number ...
    </li>
</ol>

产生一个编号为 30、40、41、2 和 2 的列表。

正如约翰已经指出的那样，在这种情况下，您最好的选择是编写脚本。

【讨论】：

【解决方案6】：

实际上，如果您在项目中使用 sass/scss 进行样式设置，则可以使用 mixin 进行此操作。要设置这个嵌套列表的样式，您只需要两行 sass 代码。

@import 'nested_list'
+nested_list('nested', 2)

<ol>
  <li>first</li>
  <li>second
      <ol class="nested-2">
          <li>second nested first element</li>
          <li>second nested secondelement</li>
          <li>second nested thirdelement</li>
      </ol>
  </li>
  <li>third</li>
  <li>fourth</li>
</ol>

您可以从git repo 克隆/观看或在fidle 上生成css 的完整示例

【讨论】：