Div的內部溢出= 「自動」來自動調整大小寬度其內容

這裏是我的HTML：Div的內部溢出= 「自動」來自動調整大小寬度其內容

<div class="scrollingBox"> 
    <div class="container"> 
     <div class="item">Item</div> 
     <div class="item">Item</div> 
     <div class="item">Item</div> 
     <div class="item">Item</div> 
    </div> 
</div

這裏是我的CSS：

.scrollingBox { 
    height:100px; 
    width:300px; 
    overflow:auto; 
} 
.item { 
    float:left; 
    height:60px; 
    margin:5px; 
    width:100px; 
}

的.container可以包含任何數量的.item s。

我現在的問題是.container將永遠不會比.scrollingBox更寬，並且滾動框以垂直滾動條結束，並且垂直堆疊結束。我給.container固定的高度，但是.item s垂直堆疊超出此固定高度。

我想.container沒有固定的寬度，所以它可以採取任何數量的項目。我想滾動條是水平的，我也想要.items水平堆疊。

我的問題：

我申請.container什麼CSS使.item的堆棧水平？

來源

2014-02-28 Jimmery

'.tems'應該相互挨在一起，直到達到'.scrollingBox'的末尾，所以基本上應該有3個項目在它們之前相互分開。你是否希望每個項目都在一行，並且只要有3個以上的項目，滾動框就會有一個水平滾動條？ –

@NicoO幾乎是 – Jimmery

然後你有你的答案在下面。祝你好運。 –

通過使用float屬性，所述元件從文檔正常流中去除。

你可以改變它們的顯示類型inline-block也讓他們在在線流量，並使用white-space: nowrap;的容器（.scrollingBox），以確保每個人旁邊的內聯項目，如下

在這裏你去：

.scrollingBox { 
    height:100px; 
    width:300px; 
    overflow:auto; 
    white-space: nowrap; /* Suppress line breaks */ 
} 
.item { 
    display: inline-block; /* Display the items as inline-block   */ 
    vertical-align: top; /* Align the inline items vertically at the top */ 
    height:60px; 
    width:100px; 
}

WORKING DEMO。

注意：您可以參考my answer刪除內嵌塊元素之間的空白區域。

來源

2014-02-28 10:47:51