Horizontal Scrolling?

I am not sure where i've seen this before, but im sure that there is a way to make horizontal scroll.

Lets say, for example you have multiple DIVs is the ff: structure:

<div class="container">
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
</di开发者_如何学Gov>

Im looking for a way to make it align horizontally and without breaking to the next line. And there will be a horizontal scroll instead of vertical scroll.

Normally if I did a float:left or display:inline, after the the div fill enough horizontal space it will go to next line. Is there anyway to make it align in a straight horizontal line and make a h-scroll for that?

---

This should work:

<div class="container">
  <div class="scroller">
    <div class="content">Content</div>
    <div class="content">Content</div>
    <div class="content">Content</div>
    <div class="content">Content</div>
    <div class="content">Content</div>
  </div>
</div>

<style>
.container {
  width:200px;
  overflow:scroll;
}
.scroller {
  width:1000px;
}
.content {
  width:200px;
  float:left;
}
</style>

---

You don’t actually have to set the width in CSS. Setting the width is bad as it doesn’t let you scale up meaning you’d have to change the width everytime you created a new element. Instead you should give the .container class a white-space: nowrap rule and have its children display set to inline-block. E.g.

.container {
    white-space: nowrap;
}

.container > div {
    display: inline-block;
}

Now you will no longer have to set the width to get this horizontal scrolling functionality.