换行的字母编号

  • 本文关键字:编号 换行 html css
  • 更新时间 :
  • 英文 :


嗨,我喜欢使用这样的有序列表。

      (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;
}​

目录

<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>

使用 content: "("counter(item, lower-alpha)")"; 而不是 content: "(" counter(item) ") "; 应该可以

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

counter(item)

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

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

使用此 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/

最新更新