Question

我希望模仿我在立法法规中看到的有序列表格式。一个特点是你有时会看到这样的列表：

(a) yadda
(b) yadda
(b-1) yadda
(b-2) yadda
(c) yadda
(d) yadda

Answer 1

您可以使用伪元素::before和CSS counters

＆＃13;

ul {
  counter-reset: list, list2, list3;
}
li {
  list-style: none;
  counter-increment: list;
}
li::before {
  content: "(" counter(list, lower-alpha)")";
  position: relative;
  left: -5px
}
li:nth-child(3) {
  counter-increment: list2 2
}
li:nth-last-child(2) {
  counter-increment: list3 3
}

li:nth-child(3)::before {
  content: "(" counter(list2, lower-alpha)"-1)";
}
li:nth-child(4)::before {
  content: "(" counter(list2, lower-alpha)"-2)";
}

＆＃13;

<ul>
  <li>Some text here</li>
  <li>Some more text here..</li>
  <li>Oh yeah, here's some pretty text</li>
  <li>Some text here</li>
  <li>Some more text here..</li>
  <li>Oh yeah, here's some pretty text</li>
</ul>

＆＃13;

Answer 2

要在HTML中创建有序列表，您必须使用标记<ol>来指定有序列表，并且每个项目都应该是<li>“列表项”。

<ol>
  <li>yadda</li>
  <li>yadda</li>
  <li>
    <ol>
      <li>yadda</li>
      <li>yadda</li>
    </ol>
  </li>
  <li>yadda</li>
</ol>

请在此处查看示例：

https://jsfiddle.net/jruizx/pcs2mh4j/

你可以看一下这个问题：

Can ordered list produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, ...) with css?

自定义有序列表内容

2 个答案: