Question

I want to have a UL list, but with its elements floating left and list to have fixed height and width.

What I have now:

ul { 
width: 230px;
height: 30px;
overflow-x: scroll;
}

li { 
float: left;
display: inline 
}

HTML:

<ul id="dev">
  <li>el</li>
  <li>el</li>
</ul>

Elements float alright, but scrollbar doesn’t work (greyed out) and elements are going to new line. What can I do?

Answer 1

Set the white-space property to nowrap on the list, and then disable float: left on the list elements.

ul { 
  /* ... */
  white-space: nowrap;
}

li { 
  display: inline;
}