Search code examples
htmlcssmenuitemsfixed-width

fixed menu width - items distribution

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

Solution

  • 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.