自动生成使用CSS编号在HTML列表 [英] Auto generate numbering list in HTML using CSS
本文介绍了自动生成使用CSS编号在HTML列表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我一直对跨国公司为我的客户。此内容将有大量的<李>< /李>
标签。因此,为了创建自动编号,我使用下面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>
输出:
现在的问题是计数器似乎在低-α
样式列表中被打破。我想避免使用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屋!
查看全文