Spread CSS <li> horizontally through <ul>

Question

I am trying to spread the <li> list horizontally using float:left through my <ul> .

Does anyone know how to do this?

Answer 1

Is there a reason why you cannot just set them to display: inline; (or inline-block )? For instance:

http://jsfiddle.net/TKmR5/

Answer 2

The answer is to use display: table; in the <ul> element and display: table-cell; for <li> elements.

Answer 3

Swim left and divide the width of ul by the number li I think this is what you need. Take a look here: http://jsfiddle.net/b2nsW/

HTML:

 <ul> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ul> 

CSS

 ul { width: 250px; background: red; padding: 0; margin: 0; overflow: auto; } li { width: 20%; float: left; background: green; margin: 2.5%; } 

Answer 4

You can use display: inline-block; It works in modern browsers.

Example: http://jsfiddle.net/joar/ELpDD/

As stated in the comments on # 7131346 ,

[...] "inconvenient space between elements" is caused not by reinstalling fields and gaskets ...

Answer 5

 li { display: inline-block; } ul{ text-align: center; } 

Then adjust the padding or margins of the li elements to extend them to a smaller or larger ul value.