固定菜单宽度 - 项目分布

Question

我有列表菜单

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

菜单 css

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

我想自动在菜单中分发我的项目，这样它们之间就有相同的空间，就像这样

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

是吗可以只使用 html 和 css 而不是 javascript 来做到这一点吗？谢谢

Answer 1

我会使用 css 类而不是影响所有 << li>，像这样：

<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; margin-right: 5px}

Answer 3

只需在每个 li 项的右侧添加一些填充，例如

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

Answer 4

ul {
    text-align: center;
}

li {
    display: inline-block;
}