`overflow：hidden`在下面的例子中做什么？ [英] What does `overflow:hidden` do in the following example?

问题描述

我的问题是，如果我从这个代码中删除 overflow：hidden ，我的整个导航栏将被隐藏，所以什么`overflow：hidden;

  ul {list-style-type：none; margin：0; padding：0; overflow：hidden; background-color：rgb（100，100，100）;} li {float：left;} li a {padding：10px 30px;显示：block; text-decoration：none;颜色：白色; font-family：sans-serif;} li a：hover {background-color：rgb（50，50，50）;}  

 < ul> < li>< a href =＃class =active>首页< / a>< / li> < li>< a href =＃>图库< / a>< / li> < li>< a href =＃>关于< / a>< / li> < li>< a href =＃>联系人< / a>< / li> < li>< a href =＃>新闻< / a>< / li> < li>< a href =＃>商店< / a>< / li> < li>< a href =＃>表单< / a>< / li>< / ul>   
解决方案
在您的情况下， overflow：hidden   
 
 
也可以 float 溢出：auto 
 code>将会这样做，如下面的例子，这将使内容滚动，如果空间不足， hidden 将隐藏相同的
 
 
 
 
 
 
  ul {list-style-type：none; margin：0; padding：0; overflow：auto; background-color：rgb（100，100，100）;} li {float：left;} li a {padding：10px 30px;显示：block; text-decoration：none;颜色：白色; font-family：sans-serif;} li a：hover {background-color：rgb（50，50，50）;}  
 
 < ul> < li>< a href =＃class =active>首页< / a>< / li> < li>< a href =＃>图库< / a>< / li> < li>< a href =＃>关于< / a>< / li> < li>< a href =＃>联系人< / a>< / li> < li>< a href =＃>新闻< / a>< / li> < li>< a href =＃>商店< / a>< / li> < li>< a href =＃>表单< / a>< / li>< / ul>   
 
My question is, if I remove the overflow:hidden from this code, my entire navigation bar is going to be hidden, so what does the `overflow:hidden; act in this example.



ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgb(100, 100, 100);
}

li{
  float: left;
}

li a{
  padding: 10px 30px;
  display: block;
  text-decoration: none;
  color: white;
  font-family: sans-serif;
}

li a:hover{
  background-color: rgb(50, 50, 50);
}

<ul>
  <li><a href="#" class="active">Home</a></li>
  <li><a href="#">Gallery</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Store</a></li>
  <li><a href="#">Form</a></li>
</ul>



解决方案
In your case, overflow: hidden tells the parent of children having float to expand to its children's size.

Also overflow: auto will do that, like in below sample, which will make the content scroll in case of lack of space, where hidden will hide the same



ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  background-color: rgb(100, 100, 100);
}

li{
  float: left;
}

li a{
  padding: 10px 30px;
  display: block;
  text-decoration: none;
  color: white;
  font-family: sans-serif;
}

li a:hover{
  background-color: rgb(50, 50, 50);
}

<ul>
  <li><a href="#" class="active">Home</a></li>
  <li><a href="#">Gallery</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Store</a></li>
  <li><a href="#">Form</a></li>
</ul>





                        
这篇关于`overflow：hidden`在下面的例子中做什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！