邊框底部出現在元素頂部

我不明白爲什麼我的下邊框不會出現在我的導航欄下方。它工作正常，直到我添加#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

邊框底部出現在元素頂部

回答

相關問題