問題與背景色時使用浮動：左

CSS：問題與背景色時使用浮動：左

ul#navlist { 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
    float: left; 
    width: 100%; 
    color: #fff; 
    background-color: #036; 
} 

ul#navlist li { 
    display: inline; 
} 

ul#navlist li a { 
    float: left; 
    width: 5em; 
    color: #fff; 
    background-color: #036; 
    padding: .2em 1em; 
    text-decoration: none; 
    border-right: 1px solid #fff; 
} 

ul#navlist li a:hover { 
    background-color: #369; 
    color: #fff; 
}

HTML：

<ul id="navlist"> 
    <li><a href="#">Item one</a></li> 
    <li><a href="#">Item two</a></li> 
    <li><a href="#">Item three</a></li> 
</ul>

問：

如果我刪除此行：float:left內ul#navlist，background-color: #036;會沒有出現，爲什麼？

來源

2013-07-23 user2294256

在http://jsfiddle.net/你的代碼似乎工作！ – Alesanco

@Alesanco，因爲通過在'a'元素上聲明相同的顏色有「解決方法」。看到區別：http://jsfiddle.net/DZSh4/ – Christoph

你是對的...我很抱歉，我沒有看到它。 – Alesanco

浮動的項目從正常文檔流中移除。這就是爲什麼你必須建立父元素塊內容或明確地清除浮動：

/* All of the following will work: */ 

ul#navlist { 
    float: left; 
    /* problem: the element itself is removed from the document flow */ 
} 

ul#navlist { 
    overflow: hidden; 
    /* problem: dropdown lists will get truncated */ 
} 

ul:after { 
    content: ""; 
    display: block; 
    clear: both; 
    /* problem: compatibility with older browsers */ 
}

其它可能的解決方案是不浮動li/a但使用display:inline-block代替，其中規定之間空白的新問題這些元素顯示爲「魔力邊緣」。

所有這些方法都有一定的限制，您應該選擇最適合您的方法。

來源

2013-07-23 08:13:35 Christoph

用於這個和除去float left;

ul#navlist:after{ 
     content:''; 
     overflow:hidden; 
     clear:both; 
     display:table; 

    } 
ul#navlist li { 
    display: inline-block; // add this line 
    vertical-align:top; // add this line 
} 

ul#navlist li a { 
    display:block; // add this line and remove float left 
    width: 5em; 
    color: #fff; 
    background-color: #036; 
    padding: .2em 1em; 
    text-decoration: none; 
    border-right: 1px solid #fff; 
}

Demo

來源

2013-07-23 08:12:02

你可以在錨元素上留下沒有左邊距的版本嗎？ ;） – Christoph

問題與背景色時使用浮動：左

回答

相關問題