如何将两个百里叶元素放在一起

Question

如果用户已登录，则其名称将显示在屏幕的右上角。如果用户未验证其电子邮件，则会显示一条链接，其中显示消息＆＃34;电子邮件未经验证＆＃34;。该链接将再次发送电子邮件验证。在后面一切都很好。链接位于用户名旁边，现在我尝试将其放在用户名旁边并放在括号中。

<div th:if="${isLogged}" class="div-block-10">
    <div class="user_name" th:text="${user.getFirstName() + ' ' +
        user.getLastName()}">Your Name</div>
    <div th:if="${!user.isEmailValidated()}" class="div-block-13">
        <div class="email_confirmed">
            <a th:href="@{'/email/send/' + ${user.getToken()}}">Your email is
                not confirmed!</a>
        </div>
    </div>
</div>

.div-block-10 {
    position: absolute;
    top: 0px;
    right: 0px;
    margin-top: 20px;
    margin-right: 40px;
    white-space: nowrap;
}

.div-block-13{
    position: absolute;
    top: 0px;
    right: 7px;
    margin-top: 50px;
    white-space: nowrap;
}

我尝试更改div-block-13 css，但我无法弄清楚如何将链接定位在用户名旁边。我想有一种方法可以将链接与div-block-10元素中的用户名放在一起。

Answer 1

尝试以下CSS：

.div-block-13{
  position: absolute;
  top: 0px;
  right: 7px;
  margin-top: 50px;
  white-space: nowrap;
  display:inline-block;
}