html - 固定菜单宽度 - 项目分布

Question

我有列表菜单

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

菜单 CSS

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

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

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

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

score 2 · Accepted Answer

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

<li class="menuItem">

至于CSS：

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

':last-child' 选择器覆盖了之前的定义并删除了最后一个菜单项的右侧空间。

score 1 · Accepted Answer

1

您可以在 li 的右侧添加边距

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

于 2011-10-17T22:37:34.543 回答

score 1 · Accepted Answer

1

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

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

于 2011-10-17T22:37:47.497 回答

score 0 · Accepted Answer

0

ul {
    text-align: center;
}

li {
    display: inline-block;
}

于 2011-10-17T22:42:31.873 回答

4 回答 4