Question

最后一个<li>何时同时具有浮动和溢出属性，但仍隐藏？

您可以删除float或float属性以查看效果。

我想知道为什么隐藏了4个元素，显示了5个元素;

.menu {
  width: 300px;
  line-height: 50px;
  border: 2px solid #333;
  padding: 0;
  color: white;
}		
.menu li {
  float: left;
  text-align: center;
  list-style: none;
}

<ul class="menu">
	<li style="width: 50%; background: red;">1</li>
	<li style="width: 50%; background: blue;">2</li>
    <!-- when the last one set both float and overflow it will hidden ? -->
	<li style="float: none; overflow: hidden; background: #cdf;">4</li>
    <li style="float: none; overflow: hidden; background: black;">5</li>
</ul>

Answer 1

你没有足够的空间，因为前2个li的宽度为50％，所以最后一个没有剩余空间，如果要显示最后一个，则需要宽度为33.3333％ 50％

Answer 2

设置为“width：50％”，第三个元素没有空位。

.menu {
  width: 300px;
  line-height: 50px;
  border: 2px solid #333;
  padding: 0;
  color: white;
}       
.menu li {
  float: left;
  text-align: center;
  list-style: none;
}

<ul class="menu">
    <li style="width: 40%; background: red;">1</li>
    <li style="width: 40%; background: blue;">2</li>
    <!-- when the last one set both float and overflow it will hidden ? -->
    <li style="float: none; overflow: hidden; background: #cdf;">4</li>
</ul>

Answer 3

因为你为第一个li标签添加了50％的宽度，所以第三个标签没有空间我只为第一个和第二个标签添加了33.33％并完成了它。

以这种方式检查以下演示链接，您可以显示第3个

https://fiddle.jshell.net/v11wtky1/

Answer 4

也许你想要这个？

无论如何，主要的问题是，因为thery的宽度为50％，所以前两个LI将填满整个可用空间。另外，如果您喜欢新行中的最后一行，则正确的规则是clear:both，而不是float: none。隐藏的溢出不应该发挥任何重要的规则，如果你真的需要它可以保留它。

＆＃13;

.menu {
  width: 300px;
  line-height: 50px;
  border: 2px solid #333;
  padding: 0;
  color: white;
}		

.menu:before,
.menu:after{ /* optional, just to give volume (clearfix) */
   content:""; display:table;
}

.menu:after{ /* optional, just to give volume (clearfix) */
  clear:both
}

.menu li {
  text-align: center;
  list-style: none;
}

.menu li:not(:last-child){
  float: left;
  width: 50%;
  background-color:#f00;
}

.menu li:last-child {
  clear:both;
  overflow: hidden; /* no problem with overflow hidden */
  width: 100%;
  background-color:#0f0;
}

＆＃13;

<ul class="menu">
	<li>1</li>
	<li>2</li>
	<li>4</li>
</ul>

＆＃13;

为什么我的最后一个<li>元素隐藏了overflow：hidden;？

4 个答案: