html - 如何修复我的 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>

标签： htmlcss

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>