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

Question

上下文

如果您 float: left 在 un-ordered 列表中列出项目并且它们水平溢出页面，它们将一次消失一个，而不是例如显示半个列表项目。

用英语很难解释，所以这里有一个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 }

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

这在 using display:inline instead 时当然不会发生，但不幸的是，它很难设计。这是来自实际网站的图片：

float: left：最后一个选项卡根本不可见： displat: inline：可怕的事情发生了：

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

问题

你能在使用 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>

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

float: left <li>: items disappear at overflow

css

layout

css-float

上下文

问题