有序列表可以产生的结果，看起来像1.1,1.2,1.3(而不是只是1,2,3，…)与css?

用CSS，一个有序的列表能产生像1.1、1.2、1.3这样的结果吗(而不是1、2、3……)?到目前为止，使用list-style-type:decimal只生成了1,2,3，而不是1.1,1.2。1.3点。

当前回答

我在添加编号列表到Python Markdown的TOC扩展。

我是这样做的:

.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; }

我不确定这是正确的方法，但对我来说很有效。

2021-05-22 14:04:08

其他回答

在不久的将来，您可能能够使用::marker伪元素在一行代码中实现与其他解决方案相同的结果。

记得检查浏览器兼容性表，因为这仍然是一个实验技术。在撰写本文时，只有Firefox和Firefox for Android(从版本68开始)支持此功能。

这是一个抽泣，如果尝试在一个温和的浏览器: 签名。‘:’的李正左:0。 < ol > < li > li元素 < ol > <li>sub li element</li> <li>sub li element</li> <li>sub li element</li> < / ol > < / li > < li > li元素< / li > < li > li元素 < ol > <li>sub li element</li> <li>sub li element</li> <li>sub li element</li> < / ol > < / li > < / ol >

你可能也想看看smashingmagazine上关于这个话题的文章。

2019-10-07 11:24:46

<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

2013-09-25 12:33:28

我需要将此添加到12中发布的解决方案中，因为我使用了一个混合了有序列表和无序列表组件的列表。不加引号似乎有点奇怪，我知道，但它很管用……

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

2014-08-15 14:06:06

下面的方法对我很有效:

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/ 有更多和合理的文本

2016-02-23 01:19:27

这里发布的解决方案对我来说并不是很好，所以我把这个问题和下面的问题混合在一起:有可能在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

2014-08-14 01:46:26

有序列表可以产生的结果，看起来像1.1,1.2,1.3(而不是只是1,2,3，…)与css?

推荐文章

最新文章

标签