有序列表（HTML）下α和右括号？ [英] Ordered list (HTML) lower-alpha with right parentheses?

问题描述

有序列表的默认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.

这篇关于有序列表（HTML）下α和右括号？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！