包裹的字母编号

Question

您好我喜欢使用这样的有序列表。

      (a) You must give any other recipients of the Work or
          Derivative Works a copy of this License; and

      (b) You must cause any modified files to carry prominent notices
          stating that You changed the files; and

      (c) You must retain, in the Source form of any Derivative Works
          that You distribute, all copyright, patent, trademark, and
          attribution notices from the Source form of the Work,
          excluding those notices that do not pertain to any part of
          the Derivative Works; and

      (d) If the Work includes a "NOTICE" text file as part of its
          distribution, then any Derivative Works that You distribute must

我尝试了这个，但它显示了数字。

/* Wrap alphabet. */
ol.wrapAlphabet {
    list-style-type: lower-alpha;
    counter-reset: item;
    margin-left: 0;
    padding-left: 0;
    margin-top: 5px;
}

ol.wrapAlphabet li {
    display: block;
    margin-left: 2em;
}

ol.wrapAlphabet li:before {
    display: inline-block;
    content: "(" counter(item) ") ";
    counter-increment: item;
    width: 2em;
    margin-left: -2em;
}​

HTML

<ol class="wrapAlphabet">
<li>
      You must give any other recipients of the Work or
          Derivative Works a copy of this License; and
</li>

<li>
      You must cause any modified files to carry prominent notices
          stating that You changed the files; and
</li>

<li>
      You must retain, in the Source form of any Derivative Works
          that You distribute, all copyright, patent, trademark, and
          attribution notices from the Source form of the Work,
          excluding those notices that do not pertain to any part of
          the Derivative Works; and
</li>

Answer 1

使用content: "("counter(item, lower-alpha)")";代替content: "(" counter(item) ") ";应该有效

演示：http://jsfiddle.net/J5NmV/1/

Answer 2

counter(item)只给出整数而不是数字。所以，你需要使用JavaScript或jQuery来循环并设置一个属性，比如data-count并设置字母表。

然后，您需要将counter(item)替换为attr(data-count)，以便显示字母。

Answer 3

使用此CSS：

/* Wrap alphabet. */
ol.wrapAlphabet {
    list-style-type: lower-alpha;
    counter-reset: item;
    margin-left: 0;
    padding-left: 0;
    margin-top: 5px;
    padding-left: 40px;
}

ol.wrapAlphabet li {
}

ol.wrapAlphabet li:before {
    display: inline-block;
    content: "(";
    counter-increment: item;
    width: 2em;
    margin-left: -1.75em;
}
ol.wrapAlphabet li:after {
    display: inline-block;
    content: ")";
    counter-increment: item;
    width: 2em;
    margin-left: -3.5em;
}
​

演示：http://jsfiddle.net/x5Rwv/

---

如果您使用的是更好的现代浏览器（我假设），您只需替换：

content: "("counter(item)";

使用：

content: "("counter(item, lower-alpha)")";

演示：http://jsfiddle.net/x5Rwv/1/