顯示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

我錯過了今天很明顯的東西，傢伙 - 將不勝感激 請。

你錯過了「明顯」的事情是，第三和第四內部div s的下方下降，因爲沒有足夠的水平空間。舉例來說，如果我檢查一下使用Chrome的開發工具：

解決這個問題的最簡單的方法是從float: left（你已經擁有它！）切換爲display: inline-block，與white-space: nowrap包含的元素上：

http://jsfiddle.net/rGfNY/

Answer 2

你需要用他們在一個新的div，給DIV的寬度，（大於你的外層div），它會通過外div的溢出隱患被切斷。

需要注意的是：內部div的寬度並不隨內容而調整，要麼你專門設置它非常高，要麼你必須計算它的內容或者只是把它硬編碼在CSS中，或使用JavaScript 。

HTML：

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

CSS：

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

工作示例： http://jsfiddle.net/f2wpm/