내부 div는 스크롤로 수평으로 외부 div를 펼칩니다.

Question

외부 div 안에 한 줄을 모두 표시하고 두 번째 줄에 표시하지 않도록 자식 div를 만드는 방법은 무엇입니까? 스크롤 바를 볼 수 있도록 스크롤 바를 스크롤하여 내부 div를 모두 볼 수 있도록 외부 div 너비를 고정해야합니다. 여기

http://jsfiddle.net/pkbkY/

<style type="text/css"> 
    .child 
    { 
     width: 100px; 
     float: left; 
    } 
</style> 

<div style="width: 500px; overflow: scroll;"> 
    <div class="child"> 
     <table> 
      <tr> 
       <td> 
        a 
       </td> 
      </tr> 
     </table> 
    </div> 
    <div class="child"> 
     <table> 
      <tr> 
       <td> 
        a 
       </td> 
      </tr> 
     </table> 
    </div> 
    <div class="child"> 
     <table> 
      <tr> 
       <td> 
        a 
       </td> 
      </tr> 
     </table> 
    </div> 
    <div class="child"> 
     <table> 
      <tr> 
       <td> 
        a 
       </td> 
      </tr> 
     </table> 
    </div> 
    <div class="child"> 
     <table> 
      <tr> 
       <td> 
        a 
       </td> 
      </tr> 
     </table> 
    </div> 
    <div class="child"> 
     <table> 
      <tr> 
       <td> 
        a 
       </td> 
      </tr> 
     </table> 
    </div> 
</div> 

Answer 1

당신이가는 : http://jsfiddle.net/thirtydot/pkbkY/1/

#scroll_container { 
    width: 500px; 
    overflow: scroll; 
    white-space: nowrap; 
} 
.child { 
    width: 100px; 
    display: inline-block; 
    border: 1px solid red; 
} 

당신이 사라 할 수있는 간격이 필요한 경우, 가장 쉬운 해결책은 자식 요소 사이의 공백을 제거하는 것입니다 : http://jsfiddle.net/thirtydot/pkbkY/2/