有序列表能否使用CSS生成看起来像1.1、1.2、1.3（而不是仅仅1，2，3，…）的结果？

201

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

html  css 
— 理查德77
source
我建议将接受的答案与Jakub Jirutka的答案进行比较。我认为后者要好得多。
— Frank Conijn
优雅的解决方案。知道维基百科为何在其内容部分使用ul而不是ul吗？
— Mattypants
1
@davnicwil我同意；好像我9月份可能以错误的顺序应用了重复项。
— TylerH
很酷，现在我感到很尴尬，因为这从来没有发生在我身上，这可能是一个简单的错误-抱歉！
— davnicwil

Answers:

289

您可以使用计数器来这样做：

以下样式表编号嵌套列表项，如“ 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>
展开摘要

有关更多信息，请参见嵌套计数器和作用域。

— 秋葵
source
2
好答案。这有什么支持？
— 杰森·麦克雷里
1
@Jason McCreary：好吧，这是缺点：IE直到版本8才支持计数器。
— Gumbo 2010年
3
此解决方案遗漏了一件小事：项目编号后的点。它看起来不像标准列表样式。通过在以下规则中添加点来解决li:before：content: counters(item, ".")". ";
— LS
4
这是一个很差的答案。它不能正常工作。在下面查看Jakub Jirutka的回答
— Pablo先生
1
我知道@ Gumbo，Jakub的回答给了我正确的编号。
— Pablo先生2014年
236

此页面上的解决方案均不能在所有级别和长（包装）段落中正确且普遍地使用。由于标记的大小可变（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上进行尝试。

— 雅库布·朱鲁特卡（Jakub Jirutka）
source
1
做好这种缩进的工作。但是，我仍然会争辩说，您列出的前两种缩进情况是优先考虑的问题，而不是对与错。考虑第一种情况和第二种情况 -后者设法在间距变得笨拙之前挤进了更多的水平，同时看上去仍然很整洁。此外，MS Word和默认浏览器样式都使用案例2缩进。我猜他们也做错了吗？
— Saul Fautley，2015年
2
@ saul-fautley在排版方面是错误的。您的带有大量嵌套级别的示例表明，嵌套编号不适合太多级别，但这是显而易见的。MS Words不是排版系统，它只是一个排版较差的文档处理器。默认的浏览器样式...哦，您对排版了解不多，是吗？
— 2015年
3
它确实适用于所有级别和较长的段落（在技术上）。如果合理使用十几个级别，则这是与技术解决方案无关的另一个问题。关键是，您不必像其他解决方案一样为每个嵌套级别预先定义CSS规则。
— Jakub Jirutka 2015年
4
虽然我不会说其他答案天生就有“错误”，但我会说它们是不完整的。这个答案很明显，甚至在我要修改的风格异常怪异的网站上也起作用。
— DanielM
2
@tremby：可以通过使li使用“ display：table-row”而不是“ display：table”来解决此差异。这带来的问题是li不能使用任何边距/填充，因为表行始终根据其内容自动调整大小。这可以通过在“ display：block”中添加“ li：after”来解决。有关完整示例，请参见jsFiddle。作为额外的奖励，我在“ li：before”之前添加了“ text-align：right”以使数字正确对齐。
— mmlr
64

选择的答案是一个很好的开始，但是从本质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/

— 索尔·福特利
source
缺点是，它会在每个列表项的末尾添加句点。
— 戴文·史都德
3
@Davin Studer：根据默认ol行为，它仅在每个数字的末尾添加一个句点。可以通过"."从content属性中删除最后一个来轻松删除它，但这对我来说有点奇怪。
— Saul Fautley 2014年
14

此处发布的解决方案对我而言效果不佳，因此我将这个问题和以下问题进行了混合：是否可以在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 */

结果：

屏幕截图

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

— chelder
source
1
这是整个页面上最好（也是最简单）的工作答案。
— Bruno Toffolo
6

注意：使用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>
展开摘要

— 肯尼
source
当列表嵌套时，此解决方案将严重失败。
— LS 2014年
@LS您可以随时容纳选择器以满足您的需要。.foo > ol > li。
— kennytm 2014年
1
我的观点是，您已硬编码“ 1”。融入风格。当子列表是父列表中第二项的子项时，会发生什么？您希望它显示为“ 2.”，但始终为“ 1”。因为它的编码方式在这里 有什么解决方案？为每个可能的数字制作新的样式集？不可以。请使用counters()上面示例中的counter()函数代替函数。
— LS
2 
<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

— 劲霸
source
1

在不久的将来，您也许可以使用::markerpsuedo元素在仅一行代码中获得与其他解决方案相同的结果。

请记住检查浏览器兼容性表，因为这仍然是一项实验性技术。目前，仅从版本68开始编写Firefox和Firefox for Android（支持Firefox）。

这是一个片段，如果在兼容的浏览器中尝试过，它将可以正确呈现： 

::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>
展开摘要

您可能还想通过砸杂志来查看这篇很棒的文章。

— 暴龙
source
0

我需要将其添加到12中发布的解决方案中，因为我正在使用混合了有序列表和无序列表组件的列表。内容：我不知道，不加引号似乎是一件奇怪的事情，但它确实有效...

ol ul li:before {
    content: no-close-quote;
    counter-increment: none;
    display: list-item;
    margin-right: 100%;
    position: absolute;
    right: 10px;
}
— 本杰利特
source
0

以下为我工作：

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/ 并附有更多合理的文字

— 威利·旺卡
source
浪费时间看。与先前的答案几乎相同。唯一的区别是“）”已添加到标记的末尾。
— juanitogan '16
0

如果要先调整其他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>
— 桑迪普·库马尔
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.