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

당신의 .carousel 사업부에 white-space:nowrap 추가 : 회전 목마 스크롤 수평 대신 자사의 오버 플로우를 숨기고 싶은 경우

.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.