为什么我的最后一个 <li> 元素会以 overflow: hidden; 隐藏？答案

【问题标题】：Why does my last <li> element hides with overflow: hidden;?为什么我的最后一个 <li> 元素会以 overflow: hidden; 隐藏？
【发布时间】：2017-05-12 13:18:54
【问题描述】：

最后一个<li>什么时候同时具有float和overflow属性，但仍然隐藏？

你可以删除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>

【问题讨论】：

因为它没有宽度
但它有4个元素！
是的，你的溢出（文本）被隐藏了。
你为什么使用溢出：隐藏？？？
@kelen 您能否提供一个屏幕截图，说明 UI 的外观？

标签： html css

【解决方案1】：

你没有足够的空间放最后一个，因为你为前 2 li 提供了 50% 的宽度，所以最后一个没有空间，如果你想显示最后一个，那么你需要将宽度设置为 33.3333% 而不是 50 %

【讨论】：

列表项将简单地放在当前列表项的下方。
然后从最后一个 li 中删除 float:none 并在 .menu 类上添加 overflow:hidden

【解决方案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>

【讨论】：

【解决方案3】：

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

查看下面的演示链接，这样你就可以显示第三个了

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

【讨论】：

【解决方案4】：

也许你想要这个？

无论如何，主要问题是由于它们的宽度为 50%，前 2 个 LI 将填满整个可用空间。此外，如果您想要换行的最后一个，正确的规则是clear:both，而不是float: none。溢出隐藏不应该起任何重要的规则，如果你真的需要它，你可以保留它。

.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;
}

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

【讨论】：

谢谢，但我的目标是想知道为什么最后一个可以不显示并且宽度为0！
但是你想要实现我上面编码的布局吗？我是说，最后的结果。请查看我的编辑。