时间戳

首页 > 解决方案 > 百里香块松散风格

html - 百里香块松散风格

问题描述

我有这段代码：

<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')}" />同样的结果

标签： htmlcssspringspring-bootthymeleaf

解决方案

Thymeleaf th:block与 HTML 标记不同<block>。如果您的第一个 HTML 片段按预期工作，则使用 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>

推荐阅读