如何使用 Thymeleaf 的 th：each 保持空格以进行内联 dom？

Question

使用Thymeleafth:each循环，空格被删除(或不能添加)。

Thymeleaf代码:

<div>
<a href="#" style="text-decoration: underline" th:each="for loop here"></a>
</div> 

我预期:

<div>
<a href="#" style="text-decoration: underline">Link 1</a>
<a href="#" style="text-decoration: underline">Link 2</a>
<a href="#" style="text-decoration: underline">Link 3</a>
<a href="#" style="text-decoration: underline">Link 4</a>
<a href="#" style="text-decoration: underline">Link 5</a>
</div>

但是下面呈现的HTML

<div><a href="#" style="text-decoration: underline">Link 1</a><a href="#" style="text-decoration: underline">Link 2</a><a href="#" style="text-decoration: underline">Link 3</a><a href="#" style="text-decoration: underline">Link 4</a><a href="#" style="text-decoration: underline">Link 5</a></div>

如何添加空白(在html文件的新行)使用百里叶th:each?

My thyymleaf version is3.0.12.RELEASE

Answer 1

如果您希望链接水平排列，并在它们之间有一个空白(而不是使用display:block垂直排列)，那么您可以使用thyymeleaf合成<th:block>元素(在这里记录):

<div>
<th:block th:each="item : ${items}">
<a href="#" th:text="${item}" style="text-decoration: underline;"></a>
</th:block>
</div>

当您运行第一个代码片段时，这将给您提供与您在问题中显示的相同的布局。

更新:

---

你也可以用<span>代替<th:block>，如果你喜欢的话:

<div>
<span th:each="item : ${items}">
<a href="#" th:text="${item}" style="text-decoration: underline;"></a>
</span>
</div>

这将为您提供相同的最终结果(链接水平排列，它们之间有一个空格)，但是生成这种布局的HTML当然会略有不同。