這是代碼ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; /*The problem is here*/ background-color: #333;}li { float: left;}li a { display: inline-block; color: blue; text-align: center; padding: 14px 16px; text-decoration: none;}li a:hover { background-color: #111;}.active { background-color: red;}<ul> <li><a href="#home" class="active">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>在 ul 樣式中，正在使用溢出隱藏。現(xiàn)在，當(dāng)使用溢出隱藏時(shí)，導(dǎo)航欄的背景顏色會(huì)變成黑色，就像但是當(dāng)我刪除 Overflow:hidden 時(shí)，背景顏色消失了，就像現(xiàn)在基本上我只是感到困惑，因?yàn)橐绯觯弘[藏只是將溢出的東西隱藏在容器中，那么為什么在這里它會(huì)出現(xiàn)背景顏色呢？
3 回答
暮色呼如
TA貢獻(xiàn)1853條經(jīng)驗(yàn) 獲得超9個(gè)贊
我不想知道正確的解決方案。我只是想知道為什么溢出：隱藏的行為是這樣的。
由于您的列表項(xiàng)是浮動(dòng)的，因此默認(rèn)情況下它們不會(huì)影響其父項(xiàng)的?高度?ul?。列表元素本身的有效高度保持在此處?0，因此您實(shí)際上在任何地方都看不到背景顏色。
overflow?設(shè)置為默認(rèn)值以外的任何值auto，作為明確修復(fù)。這意味著?li?現(xiàn)在將影響?ul?的高度，現(xiàn)在?ul?實(shí)際上具有高度，您還會(huì)看到它的背景顏色應(yīng)用于該高度。
如果您不熟悉該術(shù)語，可以了解有關(guān)什么是“明確修復(fù)”以及實(shí)現(xiàn)它的其他方法的更多信息。
慕后森
TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超5個(gè)贊
除非將溢出設(shè)置為隱藏、滾動(dòng)或自動(dòng)，否則任何可能浮動(dòng)的內(nèi)容都不會(huì)被剪切。該方法的真正目的是，在沒有給元素設(shè)置高度和寬度的情況下，當(dāng)您將溢出設(shè)置為隱藏時(shí)，它會(huì)采用內(nèi)部元素的高度和寬度：https:// codepen.io/Aypro18/pen/ExVVgYa?editors=1000
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: auto; //The problem is here and the olution itself
background-color: #333;
}
li {
float: left;
}
li a {
display: inline-block;
color: blue;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.active {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li><a href="#home" class="active">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>
冉冉說
TA貢獻(xiàn)1877條經(jīng)驗(yàn) 獲得超1個(gè)贊
添加 display: flex; 至 UI 樣式?，F(xiàn)在，您可以刪除overflow:hidden。發(fā)生這種情況是因?yàn)楦冈貨]有充當(dāng)子元素的容器（因?yàn)樗鼈兊母?dòng)屬性）。所以，它不會(huì)繼承他們的身高并適應(yīng)它。因此，display flex 解決了這個(gè)問題。
- 3 回答
- 0 關(guān)注
- 192 瀏覽
添加回答
舉報(bào)
0/150
提交
取消