horizontal scroll bar with 100% width
css
Solution
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/
Problem
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?