带右括号的有序列表（HTML）下字母？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1632005/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ordered list (HTML) lower-alpha with right parentheses?
提问by Tony_Henrich
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?
有序列表的默认低字母列表类型使用点“.”。有没有办法使用右括号代替 a)... b) .. 等？
回答by DisgruntledGoat
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.
这是一个巧妙的解决方案。（老实说，我对此感到惊讶。）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>Works in all modern browsers and IE9+ (and possibly IE8 but may be buggy).
适用于所有现代浏览器和 IE9+（可能还有 IE8，但可能有问题）。
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 456bereastreethas a good solution which involves absolutely positioning the counter.
更新：我添加了子选择器以防止嵌套列表选择父样式。trejder 在评论中也提出了一个很好的观点，即列表项对齐也被搞砸了。一篇关于 456bereasttreet的文章有一个很好的解决方案，它涉及绝对定位计数器。
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 jsFiddleshowing the result, including nested lists.
这是一个显示结果的 jsFiddle，包括嵌套列表。
回答by Fydo
building off of DisgruntledGoat's answer, I expanded it to support sub lists & styles as I needed. Sharing it here in case it helps someone.
基于 DisgruntledGoat 的答案，我将其扩展为根据需要支持子列表和样式。在这里分享，以防它对某人有帮助。
https://jsfiddle.net/0a8992b9/outputs:
https://jsfiddle.net/0a8992b9/输出：
(i)first roman
(a)first alpha
(b)second alpha
(c)third alpha
(d)fourth alpha
(ii)second roman
(iii)third roman
(a)first alpha
(b)second alpha
回答by themis
Adding this to the CSS gave some interesting results. It was close, but no cigar.
将此添加到 CSS 中会产生一些有趣的结果。很近，但没有雪茄。
li:before {
display: inline-block;
width: 1em;
position: relative;
left: -0.5em;
content: ')'
}
----- Edited to include solution from Iazel, in the comments -----
----- 编辑以在评论中包含 Iazel 的解决方案 -----
I've perfected your solution:
我已经完善了您的解决方案：
li {
position: relative;
}
li:before {
display: inline-block;
width: 7px;
position: absolute;
left: -12px;
content: ')';
background-color: #FFF;
text-align: center;
}
The background and position: absolutedid the trick!
背景并position: absolute成功！
回答by uranoz
This works for me in IE7, FF3.6, Opera 9.64 and Chrome 6.0.4:
这在 IE7、FF3.6、Opera 9.64 和 Chrome 6.0.4 中对我有用：
<ol start="a" type="a" style="font-weight: normal;">
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) </span> content for line number one;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) </span> content for line number two;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) </span> content for line number three;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) </span> content for line number four;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) </span> content for line number five;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) </span> content for line number six;</li>
</ol>
this is inline because it is coded for an email, but the main point is that the span acts as a content block and pulls the paren into negative left territory so it lines up with the list numbers. the two margins are to compensate for IE7 and FF differences
这是内联的，因为它是为电子邮件编码的，但重点是跨度充当内容块并将括号拉入负左区域，使其与列表编号对齐。这两个边距是为了补偿 IE7 和 FF 的差异
hope this helps.
希望这可以帮助。
