float：left <li>：项目在溢出时消失

Question

上下文

如果float: left列出了无序列表中的项目并且它们水平溢出页面，它们会一次消失一个，而不是显示列表项目的一半。

用英语解释很难，所以这里是Fiddle：

ul { height: 38px; padding: 0; overflow: hidden; white-space: nowrap }
ul li { list-style-type: none; padding: 10px; border-right: 1px solid black; display: inline }

尝试水平调整结果窗口的大小，您将看到列表项在溢出后如何完全消失。

当using display:inline instead时，这当然不会发生，但不幸的是，它的风格难以置信。这是来自实际网站的图片：

float: left：根本看不到最后一个标签： displat: inline：可怕的事情发生了：

display: inline-block也打破了风格，所以我不喜欢，除非这是我唯一的选择。

问题

在使用float: left时可以避免这种剪切问题吗？

Answer 1

将其包裹在容器中，并对其进行溢出。看一下这个。这是否解决了您的问题？

.container {overflow: hidden}
ul { height:38px; padding:0; white-space: nowrap; overflow:auto}
ul li { list-style-type: none; padding:10px; border-right:1px solid black; display:inline }

<div class="container"><ul>
<li>Lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit amit</li>
<li>consectetur</li>
<li>Lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit amit</li>
<li>consectetur</li>
<li>Lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit amit</li>
<li>consectetur</li>
<li>Lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit amit</li>
<li>consectetur</li>
</ul></div>