Question

我想为客户设计一个这样的有序列表，但我不确定如何。客户希望有一个策略页面，包含几个部分。每个部分都有几个语句，编号如下：＆＃34; x.1，x.2＆＃34; （其中＆＃34; x＆＃34;取决于部分编号）。以下是这些部分的HTML外观：

<div class="customListBox">
    <h2>Section 1</h2>
    <ol>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ol>

    <h2>Section 2</h2>
    <ol>
        <li>Item 1</li>
        <li>Item 2</li>
    </ol>
</div>

这应该是最终显示的：

第1节

1.1项目1 1.2第2项 1.3项目3

第2节

2.1项目1 2.2第2项

我已经查看了其他几个问题，但几乎所有问题都涉及嵌套列表，我希望远离，因为这会导致其他网站样式出现问题。我知道CSS计数器，但不确定我是否可以在没有嵌套列表的情况下使用它们。此外，该页面是一个动态JSP页面，因此如果有一种方法可以在JSP中执行此操作，那就足够了。

我的相关问题给出了整个项目范围...我认为它太不清楚，所以我用准系统代码开始了这个。我觉得，即使我编辑了另一个，页面上的其他答案和评论（由我的第一个和非常不清楚的问题引起）可能会引起未来访问者的混淆。 Style an Ordered List like "1.1, 1.2, 1.3"

这个问题类似，但涉及嵌套列表，我需要避免由于现有样式。另外，我不想＆＃34; x＆＃34;数字，或＆＃34; x.x.x＆＃34;数;我只想要＆＃34; x.x＆＃34;数字。 Can ordered list produce result like "1, 1.2, 1.3"?

让我知道我是否应该澄清任何事情！

Answer 1

您可以使用CSS Counters和counter-increment声明。

编辑：更新了片段以使用类名并调整了伪元素定位。

编辑2：更新的代码段仅定位到第一级列表项。

 /* Whatever your defaults are */
ol {
  list-style-type:upper-alpha;
  position:relative;
}

/* Targets only .customListBox's first level child ol elements */
.customListBox > ol { 
    counter-increment: lists;
    counter-reset: items;
    list-style-type: none;
}

 /* Targets only the first level child li elements of the first ol's in .customListBox*/
.customListBox > ol > li::before {
    content: counters(lists, "", decimal) "." counters(items, "", decimal) " ";
    counter-increment: items;
    position:absolute;
    left: 0;
}

<div class="customListBox">
  <h2>Section 1</h2>
  <ol>
    <li>Item</li>
    <li>Item
      <ol>
        <li>Sub Item</li>
        <li>Sub Item</li>
        <li>Sub Item</li>
      </ol>
    </li>
    <li>Item</li>
  </ol>

  <h2>Section 2</h2>
  <ol>
    <li>Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ol>
</div>

设置有序列表，例如＆＃34; X.X＆＃34;基于列表开始属性

第1节

第2节

1 个答案: