4

I want to have some list items (floated) with 100% width.

The number of list items is arbitrary, it could be 1 or 2, or it could be 20 or 30.

When there are more items than can fit in 100% width of the page, I want it to have a scroll bar to scroll through.

This is what I am currently using, but it doesn't create the scroll. I am guessing I need to set a width for overflow to work, but I want the width to be 100%.

.scroll {overflow-x:scroll;}
.scroll li {float:left}

<div class="scroll">
   <ul>
       <li>item 1</li>
       <li>item 2</li>
       <li>item 3</li>
       <li>item 4</li>
       <div stye="clear:both"></div>
   </ul>
</div>

So how can I keep a 100% width, with an horizontal scroll?

user2909486
  • 547
  • 4
  • 8
  • 17
  • possible duplicate of [background css 100% width horizontal scroll issue](http://stackoverflow.com/questions/17565422/background-css-100-width-horizontal-scroll-issue) – Cilan Jan 08 '14 at 01:32
  • possible duplicate of [Horizontal Scrolling?](http://stackoverflow.com/questions/3574769/horizontal-scrolling) – CRABOLO Jan 08 '14 at 01:32
  • `overflow:scroll-x;` is not valid CSS - `overflow-x:scroll;` is, except in Firefox. Specs are messy at this point and Mozilla is playing strict while IE and Webkit both support separate X and Y definitions. – Niels Keurentjes Jan 08 '14 at 01:34

2 Answers2

6

Add white-space: nowrap to .scroll ul

.scroll {overflow:auto; }
.scroll ul{ white-space: nowrap;}
.scroll li {display: inline-block;}

JS Fiddle: http://jsfiddle.net/f6CRt/

Kevin Bowersox
  • 93,289
  • 19
  • 159
  • 189
0

Don't use float at all. Floated elements are block level, and white-space: nowrap;, which causes text to go off screen, only works for inline elements -- Here's a possible duplicate of your question...

So basically use:

.scroll {
  display: block;
  overflow: scroll;
  white-space: nowrap;
}
.scroll li {
  display: inline;
}

Here's a fiddle

Community
  • 1
  • 1
bazeblackwood
  • 1,127
  • 6
  • 16