这是代码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 样式中，正在使用溢出隐藏。现在，当使用溢出隐藏时，导航栏的背景颜色会变成黑色，就像但是当我删除 Overflow:hidden 时，背景颜色消失了，就像现在基本上我只是感到困惑，因为溢出：隐藏只是将溢出的东西隐藏在容器中，那么为什么在这里它会出现背景颜色呢？
3 回答
暮色呼如
TA贡献1853条经验 获得超9个赞
我不想知道正确的解决方案。我只是想知道为什么溢出：隐藏的行为是这样的。
由于您的列表项是浮动的，因此默认情况下它们不会影响其父项的 高度 ul 。列表元素本身的有效高度保持在此处 0，因此您实际上在任何地方都看不到背景颜色。
overflow 设置为默认值以外的任何值auto，作为明确修复。这意味着 li 现在将影响 ul 的高度，现在 ul 实际上具有高度，您还会看到它的背景颜色应用于该高度。
如果您不熟悉该术语，可以了解有关什么是“明确修复”以及实现它的其他方法的更多信息。
慕后森
TA贡献1802条经验 获得超5个赞
除非将溢出设置为隐藏、滚动或自动，否则任何可能浮动的内容都不会被剪切。该方法的真正目的是，在没有给元素设置高度和宽度的情况下，当您将溢出设置为隐藏时，它会采用内部元素的高度和宽度：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贡献1877条经验 获得超1个赞
添加 display: flex; 至 UI 样式。现在，您可以删除overflow:hidden。发生这种情况是因为父元素没有充当子元素的容器（因为它们的浮动属性）。所以，它不会继承他们的身高并适应它。因此，display flex 解决了这个问题。
- 3 回答
- 0 关注
- 97 浏览
添加回答
举报
0/150
提交
取消