首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >有序列表可以产生类似1.1,1.2,1.3的结果吗(而不仅仅是1,2,3,...)使用css?

有序列表可以产生类似1.1,1.2,1.3的结果吗(而不仅仅是1,2,3,...)使用css?
EN

Stack Overflow用户
提问于 2010-11-04 23:21:19
回答 7查看 204.7K关注 0票数 234

一个有序列表可以产生类似1.1,1.2,1.3的结果吗(而不仅仅是1,2,3,...)使用CSS?到目前为止,使用list-style-type:decimal只产生了1,2,3,而不是1.1,1.2,.,1.3。

EN

回答 7

Stack Overflow用户

发布于 2014-08-14 09:46:27

这里发布的解决方案对我来说效果不好,所以我混合了这个问题和以下问题的解决方案:Is it possible to create multi-level ordered list in HTML?

代码语言:javascript
复制
/* 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

票数 17
EN

Stack Overflow用户

发布于 2019-10-07 19:24:47

在不久的将来,您可能只需一行代码就可以使用::marker psuedo-element实现与其他解决方案相同的结果。

记住检查Browser Compatibility Table,因为这仍然是一项实验技术。在写这篇文章的时候,只有Firefox和Firefox for Android,从版本68开始,才支持这一点。

下面是一个可以在兼容浏览器中正确呈现的代码片段:

代码语言:javascript
复制
::marker { content: counters(list-item,'.') ':' }
li { padding-left: 0.5em }
代码语言:javascript
复制
<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

票数 3
EN

Stack Overflow用户

发布于 2013-09-25 20:33:29

代码语言:javascript
复制
<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

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/4098195

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档