固定菜单宽度 - 项目分布

Question

我有列表菜单

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

menu css

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

我想在菜单中自动分发我的项目，以便它们之间具有相同的空间，如此

{菜单} {项} {空间} {项目} {空间} {项目} {菜单}

是否可以仅使用html和css而不是javascript来执行此操作？感谢

Answer 1

我会使用css类而不是影响所有＆lt; li＆gt;，像这样：

<li class="menuItem">

至于css：

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

'：last-child'选择器会覆盖先前的定义，并删除最后一个菜单项的正确空间。

Answer 2

您可以在李的右侧添加保证金

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;
}