border-bottom出现在元素的顶部

Question

我无法弄清楚为什么我的底部边框不会出现在我的导航栏下方。 它工作正常，直到我添加#topheader所以我认为这是我的问题。 如果是这样，是否有更有效的方法将黑匣子放在首位？ 请你帮忙

<header>
<div id="topheader">
<div class="wrapper">
<div id="logo">
    <h1>TheWay</h1>
</div>
</div>
</div>


 <!--  Navigation Bar -->

 <div class="wrapper">

 <div id="nav_bar">

 <nav>

 <a href="home.html">Home</a> 

 <a href="blog.html">Blog</a> 

 <a href="music.html">Music</a> 

 <a href="events.html">Events</a> 

 <a href="contact.html">Contact</a>
 </nav>
  </div>
</div>
 </header>

这是完整的代码： http ： //tinker.io/a31d6/2

Answer 1

我根本看不到你的例子的边框底部，但假设你将它添加到#nav_bar，请尝试添加一个溢出：隐藏到你的#nav_bar。 希望这会做你想要的。

Answer 2

float: left;似乎有问题float: left;

#nav_bar nav a {
    /* ... */
    float: left;
    /* ... */
}

您可以尝试使用display: inline-block;替换浮点数display: inline-block;