Question

我已经知道溢出：隐藏它当文本无法填入边框时隐藏文字。但我不知道为什么以下编码需要它。

此代码创建导航栏，但如果我擦除溢出：隐藏，它不起作用。我想知道这件事发生了。什么隐藏的作品？请帮忙。

＆＃13;

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: #111;
}

＆＃13;

<ul>
  <li><a class="active" 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>

＆＃13;

Answer 1

那是因为你没有清除浮动左边。请删除溢出：隐藏;从代码中添加

ul:after{
         Content:"";
         display:block;
         clear:both;
}

这将正常工作。

Answer 2

当孩子有这个属性然后父母离开孩子的身高属性时，它左右浮动，所以那么ul标签看不见因为没有身高所以我们喜欢这个

＆＃13;

onWindowFocusChanged

＆＃13;

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
}
li {
  display: inline-block;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: #111;
}

＆＃13;

希望这会对你有所帮助致谢

Answer 3

实际上，如果您ul height，则效果很好这里overflow得到了很好的解释：W3C

＆＃13;

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  height:46px;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: #111;
}

＆＃13;

<ul>
  <li><a class="active" 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>

＆＃13;

w3schools溢出的例子：隐藏

3 个答案: