有序列表（HTML）下α和右括号？

本文介绍了有序列表（HTML）下α和右括号？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

有序列表的默认lower-alpha列表类型使用点。。有没有办法使用右括号，而不是像a）... b）..etc？

解决方案

解。 （老实说我对此感到惊讶。）CSS有一些名为的东西计数器 ，您可以在其中设置每个标题上的自动章节编号。有点修改给你下面;您需要自己整理填充等。

reset：list;} ol> li {list-style：none;} ol> li：before {content：counter（list，lower-alpha））; counter-increment：list;}

< span&列表样式类型（v1）：< / span>< ol> < li>数字1< / li> < li>数字2< / li> < li>第3< / li> < li>第4号< / li> < li>第5号< / li> < li>第6号< / li>< / ol>

更新：我添加了子选择器以防止嵌套列出拾取父样式。 trejder也在评论中出现了一个很好的点，列表项对齐也被搞砸了。 456bereastreet 文章有一个很好的解决方案，它涉及绝对定位计数器。 p>

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列表样式类型（v2）：< / span>< ol> < li>数字1< / li> < li>数字2< / li> < li>第3< / li> < li>第4号< / li> < li>第5号< / li> < li>第6号< / li>< / ol>

这是一个jsFiddle 显示结果，包括嵌套列表。

The default lower-alpha list type for ordered list uses a dot '.'. Is there a way to use a right parenthesis instead like a)... b) ..etc?

解决方案

Here's a neat solution. (Honestly I surprised myself with this.) CSS has something called counters, where you can set, for example, automatic chapter numbers on each heading. A bit of modification gives you the below; You'll need to sort out padding etc yourself.

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>

Works in all modern browsers and IE9+ (and possibly IE8 but may be buggy).

Update: I added child selector to prevent nested lists picking up the parent style. trejder also beings up a good point in the comments that the list item alignment is also messed up. An article on 456bereastreet has a good solution which involves absolutely positioning the counter.

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>

Here is a jsFiddle showing the result, including nested lists.