中的左对齐和右对齐链接<nav>

Question

Is there a prettier and/or better way to align some a -elements in a nav to the right, while keeping others on the left, than using floats?
float:right moves the floated elements to the top of the nav instead of keeping them where they used to be, height-wise.
This has to be a common enough problem to have a good solution. clear:both; -divs or css to fix the damages aren't really pretty solutions.

This is basically the code I have.

<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

Add classes to your a's, like shown in 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>

and css:

nav .left {
    float: left;
}

nav .right {
    float: right;
}

Also, after you do that, and if doesn't work, you may want to make sure your nav's width is long enough, so they don't all scrunch together. Like nav { width: 100%; } nav { width: 100%; }