爲什麼它沒有隱藏溢出沒有工作？

當我在下面找到這個代碼示例時，我只是在研究w3schools上的html/css。我想知道爲什麼它只顯示列表，當ul有「溢出：隱藏;」由於溢出隱藏的定義是：溢出被剪切，其餘內容將隱形爲什麼它沒有隱藏溢出沒有工作？

感謝每一個答案:)

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333333; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover { 
 
    background-color: #111111; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<ul> 
 
    <li><a href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li><a href="#about">About</a></li> 
 
</ul> 
 

 
</body> 
 
</html>

來源

2016-10-08 Herrsocke

你能提供的鏈接W3Schools的你是指什麼？ –

當你有浮動的元素時，隱藏的溢出將確保它們仍然可以被看到。確保ul元素不會崩潰是一種有點不合理的方法。 – Daniel

[CSS背景顏色可能出現重複，除非我添加溢出：隱藏？爲什麼？]（http://stackoverflow.com/questions/6479018/css-background-color-not-showing-up-unless-i-add-overflowhidden-why） – Varin

例如：

在下面的div的圖像是浮動的。第一個div有overflow:hidden;的財產。在結果中可以看出，第一個div將通過調整大小來簡化內容，但第二個div仍然會摺疊。浮動屬性有一種將文檔流中的元素取出的方法，但overflow:hidden;可以恢復該元素。這似乎有點反直覺。

#div1, #div2 { 
 
    border: 2px solid green; 
 
    margin-bottom:5px; 
 
    
 
    } 
 

 
img { 
 
    float:left; 
 
    } 
 

 
#div1 { 
 
    overflow:hidden; 
 
    }

<div id="div1"> 
 
<img src="http://placehold.it/200x100"></div> 
 
<div id="div2"> 
 
<img src="http://placehold.it/200x100"></div>

來源

2016-10-08 16:05:19 Daniel

爲什麼它沒有隱藏溢出沒有工作？

回答

相關問題