css - <nav> 中的左右对齐链接

Question

有没有比使用 float 更漂亮和/或更好的方法将 nav 中的某些 a 元素对齐到右侧，同时将其他元素保持在左侧？
float:right 将 float 元素移动到 nav 的顶部，而不是将它们保持在原来的高度位置。
这必须是一个足够普遍的问题才能有一个好的解决方案。 clear:both;-修复损坏的 div 或 css 并不是很好的解决方案。

这基本上就是我的代码。

<nav>
  <!-- left-aligned -->
    <a href="#"><img src="img/logo.svg" /></a>
    <a href="#">Foo</a>
    <a href="#">Bar</a>
  <!-- right-aligned -->
    <a href="#">Potato</a>
    <a href="#">Tomato</a>
</nav>

Answer 1

向您的 a 添加类，如 html 中所示。

html:

   <nav>
      <!-- left-aligned -->
        <a class="left" href="#"><img src="img/logo.svg" /></a>
        <a class="left" href="#">Foo</a>
        <a class="left" href="#">Bar</a>
      <!-- right-aligned -->
        <a class="right" href="#">Potato</a>
        <a class="right" href="#">Tomato</a>
    </nav>

和CSS:

nav .left {
    float: left;
}

nav .right {
    float: right;
}

此外，在您这样做之后，如果不起作用，您可能需要确保导航的宽度足够长，这样它们就不会挤在一起。像 nav { width: 100%; }