Float似乎刪除背景顏色

我正在嘗試創建導航菜單，並且我已將float: right;添加到我的li標記中，我也有一個名爲.header的div，它恰好是菜單的背景。Float似乎刪除背景顏色

從某些原因，當我添加浮動背景只消散，當我刪除浮動背景已返回到他的位置。

body{ 
    margin: 0; 
} 

.header{ 
    width: 100%; 
    height: 10%; 
    background: #616161; 
} 
ul#nav{ 
    list-style: none; 
} 
ul#nav li{ 
    display: inline-block; 
    padding-right: 25px; 
    float: right; 
}

HTML

<div class="header"> 
<ul id="nav"> 
    <li><a href="#">Website</a></li> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
</ul> 
</div>

我的代碼是純粹的，沒有CSS，沒有利潤，只顯示出可能導致的背景定位這個問題。

是否有可能將文本保持在正確的浮動和背景在一起？

使用前和浮動後：

enter image description here

來源

2014-09-27 ExCluSiv3

一個jsfiddle來演示問題將有所幫助。 – 2014-09-27 10:00:43

嘗試添加'overflow：hidden;'到'.header' – Anonymous 2014-09-27 10:00:48

您能否提供'.header'的HTML結構？ – Kamil 2014-09-27 10:02:00

</ul>之前，就把這行DEMO

<div style="clear:both"></div>

它應該工作，或添加

.header {overflow:hidden;}

建議@MaryMelody - DEMO 2

來源

2014-09-27 10:02:32 himanshu

我試過這段代碼，將它放在.header div下面，它不會改變任何事情。 – ExCluSiv3 2014-09-27 10:06:20

謝謝@MaryMelody它的工作。 – ExCluSiv3 2014-09-27 10:08:40

http://jsfiddle.net/4htfwjy6/1/它在這裏工作，或者你可以添加溢出：隱藏;作爲@Mary Melody告訴.header – himanshu 2014-09-27 10:09:09

Float似乎刪除背景顏色

回答

相關問題