jQuery 如何将括号 (a) 添加到有序列表中？兼容所有浏览器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2558358/
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
How to add brackets (a) to ordered list? compatible in all browsers
提问by Jitendra Vyas
I have to show like
我必须表现得像
(a)
（一种）
(b)
(二)
(c)
（C）
Update:
更新：
I found a CSS way
我找到了一种 CSS 方式
ol {list-style-type: none;}
li:before {content: "(" counter(section, lower-alpha) ") ";}
li { counter-increment: section;}
but it not works in IE 7 and lower.
但它不适用于 IE 7 及更低版本。
回答by deceze
This is possible with custom counters, but at least IE7- doesn't support it, some others mightn't either. See here for details: http://www.quirksmode.org/css/counter.html
这对于自定义计数器是可能的，但至少 IE7- 不支持它，其他一些也可能不支持。有关详细信息，请参见此处：http: //www.quirksmode.org/css/counter.html
Ex:
前任：
li:before {
content: "(" counter(mycounter,lower-latin) ")";
}
回答by Allan
I use this code snippet in mediawiki with CSS enabled. I am not sure whether this will work in older versions of IE...
我在启用 CSS 的 mediawiki 中使用此代码片段。我不确定这是否适用于旧版本的 IE...
{{#css:
.laparent ol { counter-reset: item }
.laparent li { display: block ; counter-increment: item; }
.laparent li:before { content: " ("counter(item,lower-alpha)") "; }
}}
<ol class=laparent>
<li> this is the first item;
<li> this is the second item; or
<li> this is the third item.
</ol>
Outputs:
输出：
(a) this is the first item;
(b) this is the second item; or
(c) this is the third item.
回答by Olivier
Since CSS3 the problem seems solved:
由于 CSS3 问题似乎解决了：
style="list-style-type: parenthesized-lower-latin;"
回答by Lasithds
Or you can simply add the text count manually without having yo worry about browser fallbacks. Works in any browser!
或者您可以简单地手动添加文本计数，而不必担心浏览器回退。适用于任何浏览器！
ul.abc-list {
list-style: none;
padding-left: 30px;
}
ul.abc-list > li > span.counter {
position: absolute;
margin-left: -20px;
/*if you want to right align the text
*
* width: 15px;
* text-align: right;
*/
}<ul class="abc-list">
<li><span class="counter">a)</span> One</li>
<li><span class="counter">b)</span> Two</li>
<li><span class="counter">c)</span> Three</li>
<li><span class="counter">d)</span> Four</li>
<li><span class="counter">e)</span> Five</li>
<ul>回答by roufamatic
There's no built-in way to do this. Which means you enter the land of (fun) hacks.
没有内置的方法可以做到这一点。这意味着您进入了（有趣的）黑客领域。
You could try a background image of two parentheses.
您可以尝试使用两个括号的背景图像。
回答by daniel kessler
I instead made paragraphs. I indented the paragraph and then pulled out the first line, using a text-indent and numbered these myself.
我反而做了段落。我缩进了段落，然后拉出第一行，使用文本缩进并自己编号。
.list_indent {
margin-left:48px;
}
.list_indent p {
text-indent:-26px;
}
<div class="list_indent">
<p> (1) The recruitment report and a copy of the blah and blah and blah and blah and blah and blah and blah and blah.;
</p>
<p> (2) A copy of the blah and blah and blah and blah and blah and blah and blah and blah.
</p>
<p> (3) Recruitment.
</p>
</div>
回答by Amy B
You can't get (a) (b) (c).
你不能得到（a）（b）（c）。
You canhowever get the letter without the brackets:
您可以但是没有得到括号内的信：
<ul style="list-style-type: lower-latin;">...</ul>
<ul style="list-style-type: lower-latin;">...</ul>
See http://www.w3schools.com/CSS/tryit.asp?filename=trycss_list-style-type_all
见http://www.w3schools.com/CSS/tryit.asp?filename=trycss_list-style-type_all
回答by jay
These are your optionsaccording to W3C.
根据 W3C，这些是您的选择。
With CSS it isn't possible. You would have to make a custom list using javascript (or similar).
使用 CSS 是不可能的。您必须使用 javascript（或类似方法）制作自定义列表。
