水平显示父div超出页面宽度

Question

<div class="parent">
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
</div>

The height of the child class is 20% and the width 200px.

What I'm wondering is how to make it so that when I have, for example, 20 parent divs it is set up so that they are all displayed horizontally, beyond the width of the page, so that I have to scroll left or right to view the data. At the moment it fills the width of the page and starts the next parent div underneath the first one so that I have to scroll vertically and I can't fathom how to rectify this problem.

Thanks in advance.

Answer 1

To do this you need to create a parent container, and then assign a overflow-x: scroll css rule to it. You will also need to assign a display: inline-block rule to your parent class. You also need to apply white-space: nowrap;.

DEMO http://jsfiddle.net/qujyunn4/

 .wrapper { overflow-x: scroll; white-space: nowrap; } .parent { display: inline-block; width: 200px; height: 300px; border: red solid thin; margin-right: 5px; white-space: nowrap; } 

 <div class="wrapper"> <div class="parent"> <div class="child"> </div> <div class="child"> </div> <div class="child"> </div> <div class="child"> </div> <div class="child"> </div> </div> <div class="parent"> <div class="child"> </div> <div class="child"> </div> <div class="child"> </div> <div class="child"> </div> <div class="child"> </div> </div> <div class="parent"> <div class="child"> </div> <div class="child"> </div> <div class="child"> </div> <div class="child"> </div> <div class="child"> </div> </div> <div class="parent"> <div class="child"> </div> <div class="child"> </div> <div class="child"> </div> <div class="child"> </div> <div class="child"> </div> </div> </div>