如何在 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

我又把nav和content放在同一个container下，但是container现在是相对定位的，nav绝对定位在top: 0, left: 0。你可以控制nav到content的距离通过调整容器宽度，或使用导航的左侧属性。我在容器周围应用了虚线边框来演示正在发生的事情，但在您的站点中它当然不需要边框。

---

原件：

如果您可以包含其余代码，我可以给您一个更好的示例，但这是您想要的布局： 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>