Java - Thymeleaf - HTML: перевод строкине работает? - PullRequest
Новая
       11

Java - Thymeleaf - HTML: перевод строкине работает?

0 голосов
/ 17 декабря 2018

Я использую 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>

В моем более позднем представлении возникла проблема.enter image description here

Я хочу, чтобы «Protein: Q6GZX4» был в одной строке ниже последовательности.И все же я не смог достичь этого с помощью <br/> или чего-либо еще.

Что мне не хватает?Спасибо за ваше время и усилия :)

1 Ответ

0 голосов
/ 17 декабря 2018

На основе @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;
}

Вывод: enter image description here

...