如何将括号（a）添加到有序列表？兼容所有浏览器答案

【问题标题】：How to add brackets (a) to ordered list? compatible in all browsers如何将括号（a）添加到有序列表？兼容所有浏览器
【发布时间】：2011-02-03 05:47:14
【问题描述】：

我必须表现得像

(a)

(b)

(c)

更新：

我找到了一种 CSS 方式

ol {list-style-type: none;}
li:before {content: "(" counter(section, lower-alpha) ") ";}
li { counter-increment: section;}

但它不适用于 IE 7 及更低版本。

【问题讨论】：

这些是括号，而不是括号。 ;)
很好，你想通了。事后改变问题并不好。这将为 IE 提供更多功能，但它不包括 counter: code.google.com/p/ie7-js 我认为您大多不走运。
我也在看 IE7.js，但它没有显示支持 :( for counters ie7-js.googlecode.com/svn/test/index.html
@Jimmy - 什么？ “括号”和“方括号”是两个词，意思完全一样。
@Hammerite - 不是“完全一样的东西”，但经过进一步调查，这两者在英国可能可以互换使用：en.wikipedia.org/wiki/Bracket

标签： jquery css xhtml

【解决方案1】：

这对于自定义计数器是可能的，但至少 IE7- 不支持它，其他一些可能也不支持。详情见这里：http://www.quirksmode.org/css/counter.html

例如：

li:before {
    content: "(" counter(mycounter,lower-latin) ")";
}

【讨论】：

但我需要ol，因为它是有序列表
@jitendra 然后您需要相应地更改 CSS，这只是一个示例。我只是在为您指明正确的方向，您必须自己编写代码。

【解决方案2】：

我在启用 CSS 的 mediawiki 中使用此代码 sn-p。我不确定这是否适用于旧版本的 IE...

<style>
    /* css handles the parentheses/brackets */
    .laparent ol { counter-reset: item }
    .laparent li { display: block ; counter-increment: item; }
    /* replace the counter before list item with
              open parenthesis + counter + close parenthesis */
    .laparent li:before { content: " (" counter(item,lower-alpha) ") "; }
</style>
<ol class="laparent">
    <li> this is the first item; </li>
    <li> this is the second item; or </li>
    <li> this is the third item. </li>
</ol>

输出：

(a) this is the first item;
(b) this is the second item; or
(c) this is the third item.

【讨论】：

你应该格式化你的答案并描述你在做什么。这对你来说可能看起来很简单，但你可以负担得起一些解释性的话

【解决方案3】：

自从 CSS3 以来问题似乎解决了：

style="list-style-type: parenthesized-lower-latin;"

http://www.w3.org/TR/2011/WD-css3-lists-20110524/

【讨论】：

这似乎不再有效

【解决方案4】：

你不能得到 (a) (b) (c)。

你可以得到不带括号的字母：

<ul style="list-style-type: lower-latin;">...</ul>

见http://www.w3schools.com/CSS/tryit.asp?filename=trycss_list-style-type_all

【讨论】：

我知道如何获取不带括号的字母。我问了一个问题，知道如何添加括号。我认为没有选择:(

【解决方案5】：

These are your options 根据 W3C。

使用 CSS 是不可能的。您必须使用 javascript（或类似的）制作自定义列表。

【讨论】：

【解决方案6】：

没有内置的方法可以做到这一点。这意味着您进入了（有趣的）黑客领域。

您可以尝试使用两个括号的背景图片。

【讨论】：

【解决方案7】：

我改为制作段落。我缩进了段落，然后拉出第一行，使用文本缩进并自己编号。

.list_indent {
margin-left:48px;
}
.list_indent p {
text-indent:-26px;
}

<div class="list_indent">  
<p> (1)&nbsp;&nbsp;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)&nbsp;&nbsp;A copy of the blah and blah and blah and blah and blah and blah and blah and blah.
</p>     
<p> (3)&nbsp;&nbsp;Recruitment.
</p>   
</div>

【讨论】：

【解决方案8】：

或者您可以简单地手动添加文本计数，而不必担心浏览器回退。适用于任何浏览器！

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>

【讨论】：