фиксированная ширина меню - распределение пунктов

Question

У меня есть список меню

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

menu css

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

Я хотел бы автоматически распределить свои пункты в меню, чтобы они имели одинаковое пространство между ними, как это

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

возможно ли сделать это, используя только html и css, а не javascript?Спасибо

Answer 1

Я бы использовал класс css вместо того, чтобы влиять на все

, например:

<li class="menuItem">

Что касается CSS:

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

Селектор ': last-child' отменяет предыдущее определение и удаляет правильное пространство для последнего пункта меню.

Answer 2

Просто добавьте отступы справа от каждого элемента li, например,

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

Answer 3

Вы можете добавить поле справа от вашего li's

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

Answer 4

ul {
    text-align: center;
}

li {
    display: inline-block;
}