如何在div旁边对齐导航栏？

Question

这是我的网站

有谁知道如何把导航栏放在我的内容将要去的白框旁边？我只是希望它与白色盒子完全垂直对齐，但让它坐在它的左边。感谢

HTML

<nav>
<div class="nav-container">
  <ul class="nav">
        <li><a href="index.html"><span class="text">HOME</span></a></li>

        <li><a href="page2.html"><span class="text">HTML & CSS</span></a></li>

        <li><a href="page3.html"><span class="text">USABILITY</span></a></li>

        <li><a href="page4.html"><span class="text">ACCESSIBILITY</span></a></li>

        <li><a href="page5.html"><span class="text">HOW I BUILT THIS</span>
      </a>
    </li>
  </ul>
</div>
</nav>

CSS

nav {                   
    margin: auto;
}

Answer 1

编辑：我误解了这个问题，这是新答案：

http://codepen.io/Vall3y/pen/gbpRoG

我已将导航和内容再次放在同一容器下，但容器现在位于相对位置，导航绝对位于顶部：0，左：0。您可以控制导航与内容的距离通过调整容器宽度，或使用nav的left属性。我在容器周围应用了虚线边框来演示正在发生的事情，但在您的网站中，它当然不需要边框。

---

原稿：

如果你可以包含剩下的代码，我可以给你一个更好的例子，但这里是你想要的布局： http://codepen.io/anon/pen/EajXgq

这里的关键是导航和内容在标记中是相邻的（元素是在另一个之后。我使用浮动左边使它们在同一垂直线上，但还有其他技术）

导航向左浮动，因此它不会占用任何流量空间，并允许内容在中心水平对齐，使用固定宽度和自动边距。

如果需要，它们都包含在容器中以允许徽标的边距 还可以看到有一个clearfix元素，用于clearfix。谷歌它找出它做了什么，但基本上它允许容器伸展浮动的元素，所以它不会搞乱布局

<div class="purple-logo"></div>
<div class="container">
  <div class="nav"></div>
  <div class="content"></div>  
  <div class="clearfix"></div>
</div>