0

我希望制作一个如下所示的有序列表。编号必须按照原来的方式进行拆分，即 2A 在 2 之后，6A，6B，6C 在 6 之后，然后是 7。

1.  Text goes here
2.  More text here
2A. This is what I need
3.  List continues like this
4.  And it goes on
5.  And on
6.  But here
6A. There is another sub section
6B. And another
6C  And another
7.  Is this possible?
8.  Please guide me.

编辑：我打算在这里做的是将一部宪法立法数字化。有第 1、2、3、4、5、6 和 7 条，修正案插入第 2A、6A、6B 和 6C 条。在纸上避免以这种方式重新编号和插入新部分是有意义的，但我想纯粹通过 HTML 来完成。我没有使用任何服务器端脚本，只使用 HTML、CSS 并且可能包含一点 Java。

我已经拥有的代码是简单的列表：

是否可以在 2 之后断开并插入 2A，然后继续使用 3？我尝试使用表格，但不喜欢这个想法，因为这对复制粘贴不友好。

4

2 回答 2

1

您可以使每个项目成为一个div元素，并将数字包含在内容中。如果您想要像示例中那样的表格外观，您也可以使用一个table元素，其中一列中包含数字，另一列中包含文本：

<table>
<tr><td>1.<td>Text goes here
<tr><td>2.<td> More text here
<tr><td>2A<td>This is what I need
...
</table>

（您可以在第一列th元素中制作单元格而不是td，因为它们类似于标题，行标题，并且应该被辅助软件视为标题。但是您可能想th { text-align: left; font-weight: normal }在 CSS 中说。）

这意味着如果添加、移动或删除项目，则必须修改内容中的编号，但无论如何这似乎是相当定制的编号。

如果您被迫使用ol，那么您需要一些复杂的 CSS 来删除默认编号（简单的部分）并将您的编号添加为生成的内容。但是由于列表的特殊性，这也需要将部分编号方案硬连线到代码中。

于 2013-10-04T12:17:17.243 回答
1

这是一个工作小提琴，使用@Joren提到的计数器：

http://jsfiddle.net/erKURITA/EruGX/7/

基本上你想要的是几个以嵌套和 li 元素为目标的选择器：

ol {
    list-style-type: none;
    counter-reset: sub_index;
}

:not(li) > ol > li {
    counter-increment: index;
}

li > ol > li:before {
    counter-increment: sub_index;
    content: counter(index,decimal)'.'counter(sub_index,upper-alpha)' ';
}

:not(li) > ol > li:before {
    content: counter(index,decimal)' ';
}

在最上面的 li 中添加一个“top”类，你就设置好了。

编辑：更新为不使用类的版本

于 2013-10-04T12:51:54.453 回答