Question

有序列表的默认低字母列表类型使用点'。'。有没有办法使用右括号代替a）... b）..等等？

Answer 1

这是一个简洁的解决方案。（老实说，我对此感到惊讶。）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>

适用于所有现代浏览器和IE9 +（可能还有IE8但可能有问题）。

更新：我添加了子选择器，以防止嵌套列表获取父样式。 trejder也在评论中提出了一个很好的观点，即列表项对齐也搞砸了。 article on 456bereastreet有一个很好的解决方案，它涉及绝对定位计数器。

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 jsFiddle显示结果，包括嵌套列表。

Answer 2

建立了DisgruntledGoat的答案，我将其扩展为支持子列表＆amp;我需要的款式。在这里分享，以防有人帮助。

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

Answer 3

在最初提出问题 10 多年后，标准（以及在某种程度上，实现）似乎已经赶上了。

CSS 现在提供 ::marker 伪类，可用于实现自定义列表标记：MDN。

使用 ::marker 会自动缩进 li 的内容，无需任何黑客攻击。根据 MDN，截至 2021 年 2 月，Firefox、Chrome 和 Edge 支持它，部分（不适用于此用例）在 Safari 中。

.container {
  width: 400px;
}

ol.custom-marker {
  counter-reset: list;
}

ol.custom-marker > li {
  list-style: none;
  counter-increment: list;
}

ol.custom-marker.parens-after.decimal > li::marker {
  content: counter(list) ")\a0";
}

ol.custom-marker.parens-around.lower-roman > li::marker {
  content: "(" counter(list, lower-roman) ")\a0";
}

<div class='container'>
  <ol class='custom-marker parens-after decimal'>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum. Quis varius quam quisque id diam.</li>
    <li>Another list here
      <ol class='custom-marker parens-around lower-roman'>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum. Quis varius quam quisque id diam.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum. Quis varius quam quisque id diam.</li>
      </ol>
    </li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum. Quis varius quam quisque id diam.</li>
  </ol>
</div>

\a0 中的

content 是  ，因为 ::marker 不支持边距或填充。

Answer 4

将此添加到CSS中会产生一些有趣的结果。它很接近，但没有雪茄。

li:before {
    display: inline-block;
    width: 1em; 
    position: relative;
    left: -0.5em; 
    content: ')'
}

-----编辑在评论中包含来自Iazel的解决方案-----

我已经完善了你的解决方案：

li {
    position: relative;
}
li:before {
    display: inline-block;
    width: 7px;
    position: absolute;
    left: -12px;
    content: ')';
    background-color: #FFF;
    text-align: center;
}

背景和position: absolute成功了！

Answer 5

这似乎有效：

ol {
  counter-reset: list;
  margin: 0;
}

ol > li {
  list-style: none;
  position: relative;
}

ol > li:before {
  counter-increment: list;
  content: counter(list, lower-alpha) ") ";
  position: absolute;
  left: -1.4em;
}

Answer 6

这适用于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;">) &nbsp;</span> content for line number one;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number two;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number three;</li> 
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number four;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number five;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number six;</li>
</ol>

这是内联的，因为它是针对电子邮件编码的，但重点是跨度充当内容块并将paren拉入负左区域，以便与列表编号对齐。两个边距是为了弥补IE7和FF的差异

希望这会有所帮助。

带有右括号的有序列表（HTML）低位字母？

6 个答案: