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!
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: