css - 在 DIV 中显示隐藏的 DIV 的一部分

Question

今天我遗漏了一些明显的东西，伙计们 - 请提供一些帮助。

我在另一个 DIV 中有一行水平的 DIV。我希望第三个 DIV 显示为被顶部 DIV 部分隐藏。但它根本没有显示。

这是 CSS:

.outer {
    background: #800;
    height: 90px;
    width: 300px;
    overflow: hidden;
    white-space: nowrap;
}
.label {
    float: left;
    display: block;
    background: #888;
    width: 75px;
    height: 50px;
    margin: 10px;
    padding: 10px;
    line-height: 50px;
    font-size: 45px;
    text-align: center;
}

这是 HTML:

<div class="outer">
    <div class="label">1</div>
    <div class="label">2</div>
    <div class="label">3</div>
    <div class="label">4</div>
</div>

感谢您的帮助!

Answer 1

I'm missing something obvious today, guys - would appreciate some help please.

您缺少的“明显”之处是第三个和第四个内部 div 正在下降，因为没有足够的水平空间。例如，如果我使用 Chrome 的开发者工具检查它:

解决此问题的最简单方法是从 float: left 切换到 display: inline-block，并使用 white-space: nowrap (你已经有了!)在包含元素上:

http://jsfiddle.net/rGfNY/