플로팅 요소가 줄 바꿈하지 않도록 방지 (스크롤 막대 표시)

Question

div 태그의 요소를 줄 바꿈하지 않고 대신 페이지의 사용 가능한 공간 이상으로 확장하려면 어떻게해야합니까? 예를 들어

, 내가 가진 :

<div class="container"> 
<div class="row"> 
    <div class="child">1</div> 
    <div class="child">2</div> 
    ... 
    <div class="child">19</div> 
    <div class="child">20</div> 
</div> 
<div class="row"> 
    <div class="child">1</div> 
    <div class="child">2</div> 
    ... 
    <div class="child">19</div> 
    <div class="child">20</div> 
</div> 
</div>​ 

CSS :

.container{ 
    overflow: scroll; 
    width: 100%; 
} 
.row { 
    clear: both; 
} 

실제 출력 :

원하는 출력 :

http://jsfiddle.net/kcW6w/

나는 컨테이너 요소가 100 % 넓은되고 싶어하지만, 각 행은 랩 어라운드하지 않도록 스크롤 막대를 가지고있다.

큰 임의의 너비를 .row 요소로 설정하면 제대로 작동한다는 것을 알게되었습니다. 임의의 너비를 설정하는 것 외에 다른 방법이 있습니까? 너비가 동적으로 변경되므로 하드 코딩 된 너비를 사용하지 않는 것이 좋습니다.

나는 또한 가능성이 있기 때문에 내가 설정 한 임의의 값의 사파리에 스크롤 막대, 일부 불일치가있다 알

http://jsfiddle.net/kcW6w/1/

.row { 
    clear: both; 
    width: 2000px; 
} 

. 맥 OS X에 크롬에서

스크롤 바 불일치 (모든 방법을 오른쪽으로 스크롤) :

사파리도 스크롤 막대를 표시하지 않습니다.

Answer 1

당신이 시도 할 수 있습니다 - DEMO

CSS

.container { 
    overflow: scroll; 
} 

.row { 
    white-space: nowrap; 
    font-size: 0; 
} 

.child { 
    font-size: 16px; 
    width: 60px; 
    height: 60px; 
    border: 1px solid black; 
    background-color: #ccc; 
    display: inline-block; 
}