如何用Thymeleaf实现连贯嵌套有序列表（无需手动设置start值）

核心思路 #

使用单一<ol>容器承载所有列表项，将普通条目、父项条目都作为该容器的直接子<li>元素，父项内部嵌套子列表<ol>。浏览器会自动维护顶级列表的连贯序号，完全不需要手动设置start属性。

修正后的Thymeleaf代码示例 #

<ol type="a">
  <!-- 无前缀的普通列表项 -->
  <li>Coffee</li>

  <!-- 父项循环：直接作为顶级ol的子li -->
  <li th:each="parent : ${parentChildMap}">
    <!-- 父项详情内容 -->
    <div th:text="${parent.key}">父项名称示例</div>
    
    <!-- 子列表：嵌套在父项li内部，不影响顶级序号 -->
    <ol>
      <li th:each="child : ${parent.value}">
        <!-- 子项详情内容 -->
        <span th:text="${child}">子项内容示例</span>
      </li>
    </ol>
  </li>

  <!-- 后续普通列表项 -->
  <li>Water</li>
  <li>Beer</li>
</ol>

问题根源说明 #

1. 拆分多个<ol>会强制切断列表的序号连续性，必须手动维护start值，父项数量变化时必然需要修改代码；
2. 之前的代码错误地用<span>等无关标签包裹父项内容，破坏了<ol>的层级结构，导致序号无法连贯。

可选样式调整（按需使用） #

如果需要子列表使用不同的序号样式，通过CSS控制即可，无需修改HTML结构：

/* 顶级列表用小写字母 */
ol {
  list-style-type: lower-alpha;
}
/* 子列表用阿拉伯数字 */
ol ol {
  list-style-type: decimal;
  margin-left: 1.5em;
}

内容的提问来源于stack exchange，提问作者Dean Thomas