fixed menu width - items distribution

Question

I have list menu

<ul>
<li>item1</li>
<li>item2</li>
<li>longitem3</li>
</ul>

menu css

ul{
width:500px;
}
li {
float:left;
}

i would like to automatically distribute my items in menu so they would have the same space between them like this

{menu}{item}{space}{item}{space}{item}{menu}

is it possible to do this using only html and css, not javascript? Thanks

Answer 1

I would use a css class rather than affecting all the < li>, like this:

<li class="menuItem">

As for the css:

.menuItem {
    float: left;
    margin-right: <some number of px>;
}
.menuItem:last-child {
    margin-right: 0;
}

The ':last-child' selector overrides the previous definition and removes the right space for the last menu item.

Answer 2

You can add a margin to the right side of your li's

li { float:left; margin-right: 5px}

Answer 3

Just add some padding to the right of each li item, e.g.

li {
float:left;
padding-right:20px;
}

Answer 4

ul {
    text-align: center;
}

li {
    display: inline-block;
}