固定菜单宽度 - 项目分布答案

【问题标题】：fixed menu width - items distribution固定菜单宽度 - 项目分布
【发布时间】：2011-10-17 22:33:30
【问题描述】：

我有列表菜单

<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 来做到这一点？谢谢

【问题讨论】：

【解决方案1】：

我会使用一个css类而不是影响所有的

，像这样：

<li class="menuItem">

至于css：

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

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

【讨论】：

好的，谢谢。我要解决的问题是，如果我必须自己计算边距 od 填充，或者我可以以某种方式将其设置为自动完成。添加菜单项时避免重新计算边距/填充
没有 javascript 我没有看到任何优雅的解决方案。不过，您可以使用一些技巧。如果您将拥有最大数量的元素，请尝试以下操作：leaverou.me/2011/01/…，如果您的页面仅用于 IE，您可以使用 css 表达式：msdn.microsoft.com/en-us/library/ms537634(v=vs.85).aspx

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

ul {
    text-align: center;
}

li {
    display: inline-block;
}

【讨论】：