Question

有序列表是否可以使用CSS生成看起来像1.1,1.2,1.3（而不仅仅是1,2,3 ......）的结果？到目前为止，使用list-style-type:decimal只生成了1,2,3，而不是1.1，1.2。，1.3。

Answer 1

您可以使用counters执行此操作：

以下样式表编号将列表项目嵌套为“1”，“1.1”，“1.1.1”等。
OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }

示例

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

<ol>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
  <li>li element</li>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
</ol>

有关详细信息，请参阅Nested counters and scope。

Answer 2

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

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

它在Firefox 32，Chromium 37，IE 9和Android Browser上进行了测试。不适用于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上分叉。

Answer 3

选择的答案是一个很好的开始，但它实质上强制列表项上的list-style-position: inside;样式，使得包装文本难以阅读。这是一个简单的解决方法，它还可以控制数字和文本之间的边距，并根据默认行为右对齐数字。

ol {
    counter-reset: item;
}
ol li {
    display: block;
    position: relative;
}
ol li:before {
    content: counters(item, ".")".";
    counter-increment: item;
    position: absolute;
    margin-right: 100%;
    right: 10px; /* space between number and text */
}

JSFiddle： http://jsfiddle.net/3J4Bu/

Answer 4

注意：使用CSS counters在现代浏览器中创建嵌套编号。看到接受的答案。以下仅为历史利益。

如果浏览器支持content和counter，

.foo {
  counter-reset: foo;
}
.foo li {
  list-style-type: none;
}
.foo li::before {
  counter-increment: foo;
  content: "1." counter(foo) " ";
}

<ol class="foo">
  <li>uno</li>
  <li>dos</li>
  <li>tres</li>
  <li>cuatro</li>
</ol>

Answer 5

此处发布的解决方案对我来说效果不佳，所以我将这个问题和以下问题混合在一起：Is it possible to create multi-level ordered list in HTML?

/* Numbered lists like 1, 1.1, 2.2.1... */
ol li {display:block;} /* hide original list counter */
ol > li:first-child {counter-reset: item;} /* reset counter */
ol > li {counter-increment: item; position: relative;} /* increment counter */
ol > li:before {content:counters(item, ".") ". "; position: absolute; margin-right: 100%; right: 10px;} /* print counter */

结果：

screenshot

注意：屏幕截图，如果您希望查看源代码或此帖子中的内容：http://estiloasertivo.blogspot.com.es/2014/08/introduccion-running-lean-y-lean.html

Answer 6

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="author" content="Sandro Alvares - KingRider">
    </head>
    <body>
        <style type="text/css">
            li.title { 
                font-size: 20px; 
                font-weight: lighter; 
                padding: 15px; 
                counter-increment: ordem; 
            }
            .foo { 
                counter-reset: foo; 
                padding-left: 15px; 
            }
            .foo li { 
                list-style-type: none; 
            }
            .foo li:before { 
                counter-increment: foo; 
                content: counter(ordem) "." counter(foo) " "; 
            }
        </style>
        <ol>
            <li class="title">TITLE ONE</li>
            <ol class="foo">
                <li>text 1 one</li>
                <li>text 1 two</li>
                <li>text 1 three</li>
                <li>text 1 four</li>
            </ol>
            <li class="title">TITLE TWO</li>
            <ol class="foo">
                <li>text 2 one</li>
                <li>text 2 two</li>
                <li>text 2 three</li>
                <li>text 2 four</li>
            </ol>
            <li class="title">TITLE THREE</li>
            <ol class="foo">
                <li>text 3 one</li>
                <li>text 3 two</li>
                <li>text 3 three</li>
                <li>text 3 four</li>
            </ol>
        </ol>
    </body>
</html>

结果： http://i.stack.imgur.com/78bN8.jpg

Answer 7

当有两个列表时我遇到了一些问题，第二个列在DIV中第二个清单应从1开始。不是2.1

<ol>
    <li>lorem</li>
    <li>lorem ipsum</li>
</ol>

<div>
    <ol>
        <li>lorem (should be 1.)</li>
        <li>lorem ipsum ( should be 2.)</li>
    </ol>
</div>

http://jsfiddle.net/3J4Bu/364/

修改我解决了这个问题 http://jsfiddle.net/hy5f6161/

Answer 8

我需要将此添加到12中发布的解决方案，因为我使用的是列表，其中包含有序列表和无序列表组件的混合。内容：no-close-quote似乎是一件奇怪的事情，我知道，但它的确有效...

ol ul li:before {
    content: no-close-quote;
    counter-increment: none;
    display: list-item;
    margin-right: 100%;
    position: absolute;
    right: 10px;
}

Answer 9

以下对我有用：

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

请注意：http://jsfiddle.net/rLebz84u/2/

或此http://jsfiddle.net/rLebz84u/3/ 更多和合理的文字

Answer 10

这是正确的代码，如果你想第一个孩子li调整其他CSS的大小。

<style>
    li.title { 
        font-size: 20px; 

        counter-increment: ordem; 
        color:#0080B0;
    }
    .my_ol_class { 
        counter-reset: my_ol_class; 
        padding-left: 30px !important; 
    }
    .my_ol_class li { 
          display: block;
        position: relative;

    }
    .my_ol_class li:before { 
        counter-increment: my_ol_class; 
        content: counter(ordem) "." counter(my_ol_class) " "; 
        position: absolute;
        margin-right: 100%;
        right: 10px; /* space between number and text */
    }
    li.title ol li{
         font-size: 15px;
         color:#5E5E5E;
    }
</style>

在html文件中。

        <ol>
            <li class="title"> <p class="page-header list_title">Acceptance of Terms. </p>
                <ol class="my_ol_class">
                    <li> 
                        <p>
                            my text 1.
                        </p>
                    </li>
                    <li>
                        <p>
                            my text 2.
                        </p>
                    </li>
                </ol>
            </li>
        </ol>

Answer 11

在不久的将来，您也许可以使用::marker psuedo-element只需一行代码即可获得与其他解决方案相同的结果。

请记住检查Browser Compatibility Table，因为这仍然是一项实验性技术。目前，仅从版本68开始仅支持Firefox和Firefox for Android。

以下是在兼容的浏览器中尝试可正确呈现的代码段：

::marker { content: counters(list-item,'.') ':' }
li { padding-left: 0.5em }

<ol>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
  <li>li element</li>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
</ol>

您可能还想查看有关该主题的great article by smashingmagazine。

Answer 12

我是在将编号列表添加到 Python Markdown 的 TOC Extension 之后。

我做了这样的事情：

.toc ul { counter-reset: outItem; list-style: none }
.toc ul > li{ counter-reset: nestedItem }
.toc ul > li:before { content: counters(outItem, ".") ". "; counter-increment: outItem; margin-left: -2em; }

我不确定这是不是正确的方法，但它对我有用。

有序列表可以生成看起来像1.1,1.2,1.3（而不仅仅是1,2,3，...）的结果与css？

12 个答案: