Thymeleaf列表包裹Div结构调整求助：实现指定嵌套结构

我来帮你搞定这个Thymeleaf的结构问题！先看你当前的代码，主要是标签嵌套和条件判断的范围出了问题，导致第二个<ul>没法被正确包裹到<div class="Holder">里，还有一些不符合HTML规范的小细节需要调整。

问题分析 #

你原来的代码里，<th:block>提前闭合了，导致<div class="Holder">的闭合标签落在了条件判断外面，标签嵌套完全混乱；另外两个<ul>使用了相同的id="holder"，这违反了HTML的基础规范——id必须是页面唯一的。这些问题共同导致了结构不符合你的预期。

解决方案 #

根据你给出的期望结构，我们需要把两个<ul>都放在同一个<div class="Holder">中，同时修正条件判断的范围。这里分两种常见场景给出方案：

场景1：仅当predStatus.namePrem为真时，才渲染整个Holder容器及里面的两个列表

这种情况下，把整个<div class="Holder">都放到<th:block>的条件判断内，同时修复标签嵌套和重复id的问题：

<th:block th:if="${predStatus.namePrem}">
  <div class="Holder">
    <!-- 替换重复id为自定义class，保证HTML合规 -->
    <ul class="price-table__info holder-list">
      <li>
        <p class="exam1" th:text="#{exam2}"></p>
      </li>
    </ul>
    <ul class="price-table__info holder-list">
      <li>
        <p th:unless="${predStatus.kom}" class="top" th:text="#{usp}"></p>
        <p th:if="${predStatus.kom}" class="top" th:text="#{usp1}"></p>
      </li>
    </ul>
  </div>
</th:block>

场景2：Holder容器始终渲染，仅第一个列表在predStatus.namePrem为真时显示

如果你希望不管条件如何，Holder div都存在，只是第一个列表按需显示，代码调整如下：

<div class="Holder">
  <th:block th:if="${predStatus.namePrem}">
    <ul class="price-table__info holder-list">
      <li>
        <p class="exam1" th:text="#{exam2}"></p>
      </li>
    </ul>
  </th:block>
  <ul class="price-table__info holder-list">
    <li>
      <p th:unless="${predStatus.kom}" class="top" th:text="#{usp}"></p>
      <p th:if="${predStatus.kom}" class="top" th:text="#{usp1}"></p>
    </li>
  </ul>
</div>

关键调整点 #

• 修正了<th:block>的闭合位置，确保所有标签嵌套完全匹配，没有遗漏或错位
• 移除了重复的id="holder"，替换为自定义class（比如holder-list），保证HTML结构符合规范
• 让两个<ul>都处于<div class="Holder">的包裹范围内，完全匹配你期望的最终结构

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