3 回答
TA贡献1821条经验 获得超6个赞
这是一个整洁的解决方案。(老实说,这让我感到惊讶。)CSS有一个叫做counters的东西,您可以在其中设置每个标题的自动章节编号。进行一些修改可以为您提供以下内容;您需要自己整理填充等。
ol {
counter-reset: list;
}
ol > li {
list-style: none;
}
ol > li:before {
content: counter(list, lower-alpha) ") ";
counter-increment: list;
}
<span>custom list style type (v1):</span>
<ol>
<li>Number 1</li>
<li>Number 2</li>
<li>Number 3</li>
<li>Number 4</li>
<li>Number 5</li>
<li>Number 6</li>
</ol>
适用于所有现代浏览器和IE9 +(可能是IE8,但可能有问题)。
更新:我添加了子选择器,以防止嵌套列表采用父样式。trejder在注释中也很不错,因为列表项的对齐方式也被弄乱了。456bereastreet上的文章提供了一个很好的解决方案,其中涉及绝对定位计数器。
ol {
counter-reset: list;
}
ol > li {
list-style: none;
position: relative;
}
ol > li:before {
counter-increment: list;
content: counter(list, lower-alpha) ") ";
position: absolute;
left: -1.4em;
}
<span>custom list style type (v2):</span>
<ol>
<li>Number 1</li>
<li>Number 2</li>
<li>Number 3</li>
<li>Number 4</li>
<li>Number 5</li>
<li>Number 6</li>
</ol>
- 3 回答
- 0 关注
- 1036 浏览
相关问题推荐
添加回答
举报