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