Question

我正在使用IntelliJ和Spring Boot和Thymeleaf进行数据库可视化项目。以下HTML模板用于一个基因的视图：

gene.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://thymeleaf.org">
<head>
    <title>Gene</title>
    <meta http-equiv="Content-Type" content="content/html; charset=UTF-8">
    <link rel="stylesheet" href="main.css" />
</head>

<body>
<!--import header-->
<header th:include="header"></header>

    <div id="main">
        <!--GeneID as page heading -->
        <h2 th:text="'Gene: '+${identifier}" style="text-align: center"></h2>
        <!--Gene description -->
        <p th:text="${description}" style="text-align: center"></p>
        <br/>
        <!-- Sequence -->
        <h3 th:text="'Sequence:'"></h3>
        <!-- For each char in sequence-->
        <th:block th:each="char:${sequence}">
            <!-- Print the char. Color encoding done by main.css -->
            <div th:class="${'gene ' + char}" th:text="${char}"></div>
        </th:block>

        <!--Protein encoded by gene -->
        <h3 th:text="'Protein:'"></h3>
        <a th:href="${'protein?id='+protein}" th:text="${protein}"></a>

    </div>

</body>
</html>

在我以后的观点中，我遇到了问题。

我希望“蛋白质：Q6GZX4”位于序列下方的一行中。但是我无法通过<br/>或其他任何方式来实现它。

我想念什么？感谢您的时间和精力：）

Answer 1

基于@manfromnowhere：

将gene.html更改为：

[...]
   <!--Protein encoded by gene -->
        <div class="breaker">
            <br/>
        <h3 style="display:inline-block;" th:text="'Protein:'"></h3>
        <a th:href="${'protein?id='+protein}" th:text="${protein}"></a>
        </div>

main.css中的断路器类：

div.breaker{
  clear:both;
}

输出：

Java-Thymeleaf-HTML：换行符<br/>不起作用？

1 个答案: