使用CSS在HTML中自动生成编号列表 [英] Auto generate numbering list in HTML using CSS

问题描述

我一直在为我的客户工作TNC。此内容会有大量的< li>< / li> 标签。因此为了创建自动编号，我一直在使用下面的代码来创造奇迹。

CSS： b
$ b

  ol {counter-reset：section; list-style-type：none; padding-left：0} 
 ol li {counter- increment：section; font-weight：700} 
 ol li：before {content：counters（section，。）。} 
 ol li ol {padding-left：15px} 
 ol li ol li {margin：10px 0} 
 ul {list-style-type：lower-alpha} 
 ul li：before {content：} 
  

HTML：

 < ol> 
< li> 
< span class =underline>标题< / span> 
< ol> 
< li> 
 Content 
< / li> 
< li> 
 Content 
< / li> 
< li> 
< span class =underline>子标题< / span> 
< ul> 
< li> 
子内容
< / li> 
< li> ;, 
子内容
< / li> 
< li> 
子内容
< / li> 
< / ul> 
< / li> 
< li> 
 Content 
< / li> 
< / ol> 
< / li> 
< / ol> 
  

OUTPUT：

jsFiddle

问题是计数器似乎被破坏后 lower-alpha 样式列表。我想避免在此过程中使用javascript，因为此网页将在其他网页中使用 AJAX 。

解决方案

TRY

  ol {counter-reset：section; list-style-type：none; padding-left：0} 
 ol li：before {counter-increment：section; font-weight：700; content：counters（section，。 b $ b ul {counter-reset：section; list-style-type：lower-alpha} 
 ul li：before {counter-increment：section; content：} 
  

working DEMO

更新

添加<$ c $

<$ p $ <$> c> counter-reset p> ul {counter-reset：section; list-style-type：lower-alpha}
ul li {counter-increment：section;}
ul li：before {content ：}


工作小提琴

阅读更多 使用CSS计数器

I've been working on TNC for my client. This content will have a lot of <li></li> tags. So in order to create the automated numbering, I've been using below code to do the magic.

CSS :

ol {counter-reset: section;list-style-type: none;padding-left:0}
ol li {counter-increment: section;font-weight:700}
ol li:before {content: counters(section, ".") ". "}
ol li ol {padding-left:15px}
ol li ol li {margin:10px 0}
ul {list-style-type:lower-alpha}
ul li:before {content: ""}

HTML :

<ol>
    <li>
    <span class="underline">Title</span>
        <ol>
            <li>
                Content
            </li>
            <li>
                Content
            </li>
            <li>
                <span class="underline">Sub title</span>
                <ul>
                    <li>
                        Sub Content
                    </li>
                    <li>
                        Sub Content
                    </li>
                    <li>
                        Sub Content
                    </li>
                </ul>
            </li>
            <li>
                Content
            </li>
        </ol>
    </li>
</ol>

OUTPUT :

jsFiddle

The problem is the counter seems to be broken after lower-alpha style list. I would like to avoid using javascript in this process as this page will be called in other page using AJAX.

解决方案

TRY

ol {counter-reset: section;  list-style-type:none;padding-left:0}
ol li:before {counter-increment: section;font-weight:700;content: counters(section, ".") ". "}
ul {counter-reset: section;  list-style-type:lower-alpha}
ul li:before {counter-increment: section; content: ""}

working DEMO

update

add counter-reset on ul for the next (inner) listings

 ul {counter-reset: section;list-style-type:lower-alpha}
 ul  li {counter-increment: section;}
 ul li:before {content: ""}

Working Fiddle

Read more on Using CSS counters

这篇关于使用CSS在HTML中自动生成编号列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！