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

问题描述

我一直对跨国公司为我的客户。此内容将有大量的＆LT;李＆GT;＆LT; /李＆GT; 标签。因此，为了创建自动编号，我使用下面code做魔术是。

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>

输出：

的jsfiddle

现在的问题是计数器似乎在低-α样式列表中被打破。我想避免使用javascript在这个过程中，因为这页将被称为在其他页面使用的 AJAX 。

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: ""}

工作演示

添加计数器复位在 UL 下一个（内）目录

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: ""}

工作小提琴

了解更多关于 使用CSS柜台

Read more on Using CSS counters

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