这是一个菜单。
例如，我有一个div元素，其中有3个跨度，所有这些都有一些边距，最大宽度和浮动(左或右)。
它从左侧开始定位，如下：
[[span1] [span2] [span3] – 这里有很多可用空间]。
我想让它像这样：
[[span1] – space – [span2] – space – [span3]]
我怎么能这样使用CSS？我有点怀疑这是不可能的。
注意，我希望它在添加或删除菜单项时保持相同的样式。
HTML：
例如，我有一个div元素，其中有3个跨度，所有这些都有一些边距，最大宽度和浮动(左或右)。
它从左侧开始定位，如下：
[[span1] [span2] [span3] – 这里有很多可用空间]。
我想让它像这样：
[[span1] – space – [span2] – space – [span3]]
我怎么能这样使用CSS？我有点怀疑这是不可能的。
注意，我希望它在添加或删除菜单项时保持相同的样式。
HTML：
<div id="menu">
<span class="menuitem"></span>
<span class="menuitem"></span>
<span class="menuitem"></span>
</div>
CSS：
#menu {
...
width:800px;
}
.menuitem {
display:block;
float:left;
margin-left:25px;
position:relative;
min-height:35px;
max-width:125px;
padding-bottom:10px;
text-align:center;
}
解决方法
在“旧的日子”，你会使用一个表，你的菜单项将均匀分布，而不必显式地声明项目的数量的宽度。
如果不是IE 6和7(如果这是关心的)，那么你可以在CSS中做同样的。
<div class="demo">
<span>Span 1</span>
<span>Span 2</span>
<span>Span 3</span>
</div>
CSS：
div.demo {
display: table;
width: 100%;
table-layout: fixed; /* For cells of equal size */
}
div.demo span {
display: table-cell;
text-align: center;
}
无需调整项目数量。
没有table-layout的示例：fixed – 单元格在整个宽度上均匀分布，但它们不一定具有相同的大小，因为它们的宽度由它们的内容决定。
> http://jsfiddle.net/w3dx/ULQwf/
table-layout的例子：fixed – 单元格的大小相同，不管它们的内容。 (感谢@DavidHerse在对此添加的评论中)。
如果你想要第一个和最后一个菜单元素左右对齐，那么你可以添加以下CSS：
div.demo span:first-child {
text-align: left;
}
div.demo span:last-child {
text-align: right;
}
