数字嵌套HTML中的有序列表

I have a nested ordered list.

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

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

Currently the nested elements start back from 1 again, e.g.

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

first
第一
second
1. second nested first element
2. 第二个嵌套的第一个元素
3. second nested second element
4. 第二个嵌套的第二个元素
5. second nested third element
6. 第二个嵌套的第三个元素
第二秒嵌套第一个元素第二个嵌套第二个元素第二个嵌套第三个元素
third
第三
fourth
第四

What I want is for the second element to be numbered like this:

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

first
第一
second

第二

2.1. second nested first element

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

2.2. second nested second element

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

2.3. second nested third element

2.3。第二个嵌套的第三个元素
third
第三
fourth
第四

Is there a way of doing this?

有办法做到这一点吗？

6 个解决方案

#1

Here's an example which works in all browsers. The pure CSS approach works in the real browsers (i.e. everything but IE6/7) and the jQuery code is to cover the unsupported. It's in flavor of an SSCCE, you can just copy'n'paste'n'run it without changes.

这是一个适用于所有浏览器的示例。纯CSS方法适用于真正的浏览器（即IE6 / 7以外的所有内容），而jQuery代码则涵盖不受支持的内容。这是SSCCE的味道，你可以复制'n'paste'n'run它没有变化。

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

#2

I know it is late to reply, but I just found an example of doing that using CSS. Add this to you CSS section (or file):

我知道回复已经很晚了，但我刚刚找到了一个使用CSS做到这一点的例子。将此添加到CSS部分（或文件）：

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

Here is an example of how your list code would look like:

以下是列表代码的示例：

<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

#3

None of solutions on this page works correctly and universally for all levels and long (wrapped) paragraphs. It’s really tricky to achieve a consistent indentation due to variable size of marker (1., 1.2, 1.10, 1.10.5, …); it can’t be just “faked,” not even with a precomputed margin/padding for each possible indentation level.

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

数字嵌套HTML中的有序列表

I finally figured out a solution that actually works and doesn’t need any JavaScript.

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

It’s tested on Firefox 32, Chromium 37, IE 9 and Android Browser. Doesn't work on IE 7 and previous.

它在Firefox 32，Chromium 37，IE 9和Android Browser上进行了测试。在IE 7和之前的版本上不起作用。

CSS:

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, ".") " ";
}

Example: 数字嵌套HTML中的有序列表

例：

Try it on jsFiddle, fork it on Gist.

在jsFiddle上试一试，在Gist上分叉吧。

#4

With a little tweaking, you should be able to adapt the technique used here (in the second example) for creating sequential lists.

通过一些调整，您应该能够调整此处使用的技术（在第二个示例中）来创建顺序列表。

#5

~~This is not possible in pure HTML/CSS.~~ See BalusC's answer for a great thinking-out-of-the-box solution. A list of numbering types can be found at w3schools, here.

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

The closest option I was able to find is use of the value attribute, from w3c, but the following markup

我能找到的最接近的选项是使用来自w3c的value属性，但是使用以下标记

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

produces a list numbered 30, 40, 41, 2 and 2.

生成一个编号为30,40,41,2和2的列表。

As John already pointed out, your best bet is going to be scripting, in this situation.

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

#6

Acctualy if you used sass/scss in you project for styling you can use mixin for this . For styling this nested list you need only two lines of sass code.

如果您在项目中使用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>

Full example you can clone/watch from git repo or generated css on fidle

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

#1

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

#2

I know it is late to reply, but I just found an example of doing that using CSS. Add this to you CSS section (or file):

我知道回复已经很晚了，但我刚刚找到了一个使用CSS做到这一点的例子。将此添加到CSS部分（或文件）：

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

Here is an example of how your list code would look like:

以下是列表代码的示例：

<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

#3

数字嵌套HTML中的有序列表

I finally figured out a solution that actually works and doesn’t need any JavaScript.

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

It’s tested on Firefox 32, Chromium 37, IE 9 and Android Browser. Doesn't work on IE 7 and previous.

它在Firefox 32，Chromium 37，IE 9和Android Browser上进行了测试。在IE 7和之前的版本上不起作用。

CSS:

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, ".") " ";
}

Example: 数字嵌套HTML中的有序列表

例：

Try it on jsFiddle, fork it on Gist.

在jsFiddle上试一试，在Gist上分叉吧。

#4

With a little tweaking, you should be able to adapt the technique used here (in the second example) for creating sequential lists.

通过一些调整，您应该能够调整此处使用的技术（在第二个示例中）来创建顺序列表。

#5

~~This is not possible in pure HTML/CSS.~~ See BalusC's answer for a great thinking-out-of-the-box solution. A list of numbering types can be found at w3schools, here.

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

The closest option I was able to find is use of the value attribute, from w3c, but the following markup

我能找到的最接近的选项是使用来自w3c的value属性，但是使用以下标记

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

produces a list numbered 30, 40, 41, 2 and 2.

生成一个编号为30,40,41,2和2的列表。

As John already pointed out, your best bet is going to be scripting, in this situation.

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

#6

Acctualy if you used sass/scss in you project for styling you can use mixin for this . For styling this nested list you need only two lines of sass code.

如果您在项目中使用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>

Full example you can clone/watch from git repo or generated css on fidle

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

秒客网

数字嵌套HTML中的有序列表

6 个解决方案

#1

#2

#3

#4

#5

#6

#1

#2

#3

#4

#5

#6

相关文章