如何修复li元素的样式，使其出现在同一行上？

Question

如何使单词保持同一行？：

这是我的cshtml-它们共享同一类。

<li class="nav-item">
    <a class="nav-link text-dark" asp-area="" asp-controller="Reservations" asp-action="Index">Reservations</a>
</li>

<li class="nav-item">
    <span class="nav-text text-dark">Hello @User.Identity.Name!</span>
</li>

Answer 1

align-self将帮助使文本以其高度为中心。

ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  align-items: center;
}

li.nav-item {
  align-self: center;
}

<ul>
  <li class="nav-item">
    <a class="nav-link text-dark" asp-area="" asp-controller="Reservations" asp-action="Index">Reservations</a>
  </li>

  <li class="nav-item">
    <span class="nav-text text-dark">Hello @User.Identity.Name!</span>
  </li>

</ul>