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


Tags: html,css,html-lists,css-float,horizontal-scrolling

Problem :

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!



Solution :

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:


    CSS Howto..

    How to use CSS 3D to display child elements perpendicular to parent element?

    How to add css box-shadow using .style javascript property

    How to disable the Dropdown?

    how to reference background image urls in css through config entrys

    Rails: How to control CSS, Javascript files

    How to define margin (CSS) around an absolutely positioned, floating element?

    CSS - How do I float one element to the right inside the other div?

    How To Design a Website for the Non-Designer that takes full advantage of JQuery on the client?

    How to create a custom vaadin component in vaadin 6

    How to add spacing between two rows of multiple divs each

    How do i make div go under another div making columns

    How come my