CSS spread horizontally across

Question

I'm trying to spread a list of <li>'s aligned horizontally using float:left across my <ul>.

Does anyone have any idea how this is done?

Answer 1

Float left and divide the width of the ul over de number of lis I think is what you are after. Have 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 2

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

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

As feela said in the comments to #7131346,

[…] "awkward space between items" is caused by not re-setting margins and paddings…

Answer 3

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

Answer 4

li {
    display: inline-block;
}

ul{
    text-align: center;
}

Then adjust the padding or margins of the li elements to spread them across less or more across the ul.

Answer 5

Is there some reason why you can't just set them to display: inline; (or inline-block)? For example:

http://jsfiddle.net/TKmR5/