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

【问题标题】：Java - Thymeleaf - HTML: Linebreak <br/> does not work?Java - Thymeleaf - HTML：换行符 <br/> 不起作用？
【发布时间】：2018-12-17 08:52:15
【问题描述】：

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

基因.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/>或其他任何方式实现它。

我错过了什么？感谢您的时间和精力:)

【问题讨论】：

如果 css 不起作用，我不确定你是否可以尝试 p.clear { clear: both; }
与 clear:both 一起工作（将蛋白质部分放入容器中并制作了一个 css 类）。蛋白质现在位于序列之下，
在容器内工作

标签： html containers line-breaks

【解决方案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;
}

输出：

【讨论】：