如何修复导航对齐并将图标添加到导航栏？

Question

我正在为该导航栏编码，如何像这样对齐其上的项目：并且我想像这样的图片一样在导航栏上添加图标吗？

<nav>
  <ul class="title-area">
    <!-- float this left -->
    <li>Sunt</li>
    <li>Beatae Vita</li>
  </ul>
  <ul class="nav-items">
    <!-- float this right-->
    <li>Arhieto</li>
    <li>Aperam</li>
    <li>Totam</li>
    <li>Rem</li>
  </ul>
</nav>

Answer 1

您可以使用flexbox。

nav {
  display: flex;
  justify-content: space-between;
}

li {
  display: inline-block
}

<nav>
  <ul class="title-area">
    <!-- float this left -->
    <li>Sunt</li>
    <li>Beatae Vita</li>
  </ul>
  <ul class="nav-items">
    <!-- float this right-->
    <li>Arhieto</li>
    <li>Aperam</li>
    <li>Totam</li>
    <li>Rem</li>
  </ul>
</nav>

Answer 2

margin-left: auto拯救的魔法：

nav {
  display: flex;
}

ul.nav-items {
  margin-left: auto;
}

li {
  display: inline-block;
}

<nav>
  <ul class="title-area">
    <!-- float this left -->
    <li>Sunt</li>
    <li>Beatae Vita</li>
  </ul>
  <ul class="nav-items">
    <!-- float this right-->
    <li>Arhieto</li>
    <li>Aperam</li>
    <li>Totam</li>
    <li>Rem</li>
  </ul>
</nav>

说明：您要说的是从元素最初要渲染的那一点开始，让margin占用容器内的可用空间。

编辑：更新了答案，使之成为一个更好的例子。最初的答案仅与在导航栏中显示分开的两半的样式有关，并假定其余部分将由OP随心所欲地设置样式。对于任何想知道这是如何完成的人，使用margin-left: auto并没有限制flexbox容器坚持分离的子代数（因​​此，您甚至可以将所有<li />都放在同一个容器中如果从语义上讲它们没有理由分开）。