CODEWITHSUNDEEP
css
user2909486
user2909486

Reputation: 557

horizontal scroll bar with 100% width

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?

Upvotes: 4

Views: 12569

Answers (2)

bazeblackwood
bazeblackwood

Reputation: 1204

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

Upvotes: 0

Kevin Bowersox
Kevin Bowersox

Reputation: 94459

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/

Upvotes: 6

Related Questions