如何在Thymeleaf页面中实现用户名与未验证邮箱链接并排显示

问题场景 #

你想用Thymeleaf在页面右上角展示用户名，当用户未验证邮箱时，在用户名后方（括号内）添加提示链接。现在的代码设置后，链接要么超出屏幕范围，要么和用户名高度不一致，还想保留原用户名的CSS，同时实现链接固定右侧、用户名过长时自动左移的效果。

问题根源 #

你之前给.div-block-10和.div-block-13都加了position: absolute，这会让两个元素完全脱离正常文档流，各自独立定位，很难保证对齐。而且用margin-top:98px来同步高度的方式太脆弱，一旦页面元素有变化，就容易错位。

解决方案 #

我们可以利用父元素已经有的flex布局来简化实现，不用再搞两个独立的绝对定位容器：

1. 调整HTML结构

把提示链接放到用户名所在的.div-block-10容器里，让它们成为兄弟元素，这样布局更容易控制：

<div th:if="${isLogged}" class="div-block-10">
  <!-- 用户名 -->
  <div class="user_name" th:text="${user.getFirstName() + ' ' + user.getLastName()}">Your Name</div>
  <!-- 未验证邮箱提示，用th:block做条件判断，不生成额外标签 -->
  <th:block th:if="${!user.isEmailValidated()}">
    <span class="email-unverified-hint">
      (<a th:href="@{'/email/send/' + ${user.getToken()}}">Your email is not confirmed!</a>)
    </span>
  </th:block>
</div>

2. 优化CSS设置

保留你原有的.div-block-10基础样式，只做少量调整，利用flex特性实现需求：

/* 保留原有属性，新增/调整关键布局属性 */
.div-block-10 {
  position: absolute;
  display: flex;
  align-items: center; /* 让子元素垂直居中，确保高度完全一致 */
  top: 98px; /* 用top代替margin-top，定位更精准 */
  right: 27px; /* 直接固定到右侧，代替margin的自动计算 */
  white-space: nowrap; /* 防止用户名和提示链接换行 */
  text-align: left; /* 保留你原有的文本对齐设置 */
}

/* 给用户名和提示链接加一点间距 */
.user_name {
  margin-right: 8px;
}

/* 可选：给提示链接设置样式，区分普通文本 */
.email-unverified-hint a {
  color: #e74c3c;
  font-size: 0.9em;
}

为什么这样改？ #

• 利用父元素的flex布局，align-items: center可以轻松让用户名和提示链接垂直对齐，不用再手动调margin来同步高度。
• 用top和right直接定位父容器，比margin更稳定，确保整个模块固定在右上角。
• white-space: nowrap保证内容不会换行，当用户名很长时，整个容器会向左延伸（因为右侧固定），完美实现“用户名较长时自动左移”的需求。
• 去掉了原来的.div-block-13，避免了两个绝对定位元素的布局冲突。

内容的提问来源于stack exchange，提问作者Georgi Michev