边框底部出现在元素顶部

我不明白为什么我的下边框不会出现在我的导航栏下方。它工作正常，直到我添加#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

来源

2013-05-17 Waymond

更换浮子请总是包含问题中相关代码。 –

我在CSS中看不到'border-bottom'规则。 – j08691

我应该包括这个问题而不是解释它。对于那个很抱歉。 – Waymond

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

来源

2013-05-17 14:19:01 kiwimind

Kiwimind，谢谢！那就是诀窍。我可以问你，你是怎么知道这会做到这一点，为什么我必须这样做？再次感谢。 – Waymond

如果你在元素中有浮动元素（就像你在#nav_bar div里面），浮动元素将从流中移除，所以div没有大小，这意味着border-bottom会出现在顶部附近。当你添加一个overflow：hidden时，它确保div将所有元素包括在内，包括浮动元素。我希望这是有道理的。 – kiwimind

我想我明白了。所以一旦我添加一个float到一个元素，元素中的“children”离开，父元素最终崩溃？ – Waymond

似乎有问题float: left;

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

你可以尝试用display: inline-block;

来源

2013-05-17 14:25:13 catcyborg

谢谢你的建议！ – Waymond

边框底部出现在元素顶部

回答

相关问题