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;

似乎有问题

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

您可以尝试使用display: inline-block;

替换浮动

border-bottom出现在元素的顶部

2 个答案: