css - 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

There seems to be problem with float: left;

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

You can try replacing the float with display: inline-block;