html - 固定菜单宽度 - 元素分布

Question

我有列表菜单

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

菜单样式

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”选择器覆盖了之前的定义并移除了最后一个菜单项的右侧空间。