百里香块失去风格答案

【问题标题】：Thymelaf block loosing style百里香块失去风格
【发布时间】：2021-05-03 04:08:21
【问题描述】：

我有这段代码：

<div class="col-md-3 col-sm-6 text-center">
<a href="/" class="logo logo_image">
    <span>
        <block >Plats</block>
        <span class="muellerhoff" >Bruts</span>
    </span>
    <img src="http://172.114.143.253:7080/images/logo.png" >
</a>
</div>

我在浏览器上看到了这个：

但是当我使用百里香时：

<div class="col-md-3 col-sm-6 text-center">
    <a href="/" class="logo logo_image">
        <th:block th:text="${@environment.getProperty('site.name1')}" />
        <span class="muellerhoff" th:text="${@environment.getProperty('site.name2')}"></span>
        <img th:src="@{/images/logo.png}" th:alt="${@environment.getProperty('site.name')}"  th:title="{@environment.getProperty('site.name')}">
    </a>
</div>

样式丢失了：

当我查看源代码时，我会看到：

<div class="col-md-3 col-sm-6 text-center">
                            <a href="/" class="logo logo_image">
                                Plats
                                <span class="muellerhoff">Bruts</span>
                                <img th:src="@{/images/logo.png}" th:alt="${@environment.getProperty('site.name')}"  th:title="{@environment.getProperty('site.name')}">
                            </a>
                        </div>

我也试过<block th:text="${@environment.getProperty('site.name1')}" />，结果相同

【问题讨论】：

标签： html css spring spring-boot thymeleaf

【解决方案1】：

Thymeleaf th:block 与 HTML 标签 <block> 不同。如果您的第一个 HTML sn-p 按预期工作，则使用 Thymeleaf 对其进行增强应该如下所示...

<div class="col-md-3 col-sm-6 text-center">
<a href="/" class="logo logo_image">
    <span>
        <block th:text="${@environment.getProperty('site.name1')}">Plats</block>
        <span class="muellerhoff" th:text="${@environment.getProperty('site.name2')}">Bruts</span>
    </span>
    <img src="http://172.114.143.253:7080/images/logo.png" th:src="@{/images/logo.png}" th:alt="${@environment.getProperty('site.name')}"  th:title="{@environment.getProperty('site.name')}">
</a>
</div>

【讨论】：

我不熟悉 HTML 中的 <block> 标签。它是如何定义的？
嗨@andrewjames，HTML specification 没有<block> 的定义，我可以假设这是作者创建的custom element，可能有一些适用于它的样式.否则，此标签将被视为常规<span>。我创建了基于 HTML 标记的 Thymeleaf 示例，该标记通过问题的定义起作用。我无法运行它，因为它需要一些未发布的 CSS 类。希望以上所有内容都能为您提供科学依据。最好的问候，
是的 - 这是有道理的。谢谢你的笔记。（我怀疑问题应该是使用<span> 而不是<block> - 但这只是我的猜测。）
@andrewjames 正如我提到的，我不知道，也许作者直接将某些 CSS 样式应用于标签，例如：block {border: 1px dashed red; display: block;}。我刚刚回答了 Thymeleaf 的问题。