Div溢出超出瀏覽器寬度，沒有設置寬度

Question

我想創建一個div而不是圖像裏面移動到下一行它只是超出瀏覽器寬度溢出。

HTML標記：

<div class="carousel"> 
    <img src="http://placehold.it/200x200"/> 
    <img src="http://placehold.it/200x200"/> 
    <img src="http://placehold.it/200x200"/> 
    <img src="http://placehold.it/200x200"/> 
    <img src="http://placehold.it/200x200"/> 
    <img src="http://placehold.it/200x200"/> 
    <img src="http://placehold.it/200x200"/> 
    <img src="http://placehold.it/200x200"/> 
    <img src="http://placehold.it/200x200"/> 
    <img src="http://placehold.it/200x200"/> 
</div> 

CSS：

.carousel { 
    overflow: scroll; 
    overflow-x: hidden; 
} 
.carousel img{ 
    display: inline-block; 
} 

反正有沒有做到這一點沒有寬度設置爲單嗎？

CodePen demo

Answer 1

添加white-space:nowrap您.carousel DIV：

.carousel { 
    overflow: scroll; 
    overflow-x: hidden; 
    white-space:nowrap; 
} 

http://codepen.io/anon/pen/iCqtc

Answer 2

只是爲了配合對方的回答，如果你想轉盤水平滾動，而不是隱藏其溢出，你可以隱藏overflow-y並設置overflow-x滾動：

.carousel 
{ 
    overflow-y: hidden; 
    overflow-x: scroll; 
    white-space: nowrap; 
} 

Check the example.