how to force horizontal scrolling in an HTML list using CSS?

Question

I have a list like this:

<div>
   <ul>
     <li>one</li>
     <li>two</li>
     <li>three</li>
     <li>four</li>
   </ul>
 </div>

and the following CSS:

ul { 
     width: 160px;
     height: 100px;
     overflow: auto; 
     }
li { 
     width: 80px;
     display: inline-block;
     float: left 
     }

I'm trying to force the list items to display from left to right, that is

 one - two - three - four

My problem:
Doing it like this gives me two rows with two items each.

Question:
Is there a CSS way to force the list items to all be in a single row so I can use horizontal scrolling? Right now if I set overflow:auto I'm only getting vertical scrollbars, which I don't want.

I don't want to set this on the wrapping div. I'm just curious if there is a CSS solution I can use within the list alone.

Thanks for help!

Answer 1

You can't really scroll floated content. Once it's floated, it's not calculated in the width or height of the parent container by default. Really the <ul> is just expanding to its set width and then not doing anything else.

Removing the float: left will make them scrollable. The only problem you'll have then is that there is the extra "space" between each inline-block. You can remove that by removing the line-breaks between each list item. It's not the prettiest thing. Normally I'd use a font-size: 0 and then reset the font-size in the list item.

You also need to make sure the items don't wrap to a new line when they hit the width of the element.

jsFiddle Examples:

• Removing line breaks
• Using font-size: 0