Question

当我在下面找到这个代码示例时，我只是在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>

Answer 1

以示例：

以下div中的图像是浮动的。第一个div具有overflow:hidden;的属性。在结果中可以看出，第一个div将通过调整大小来促进内容，但第二个div仍然会崩溃。 float属性有一种方法可以将元素从文档流中取出，但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>

为什么没有溢出隐藏它不起作用？

1 个答案: