css如何让图片均匀分布,css – 如何均匀分布元素在一个div相邻？

在“旧的日子”，你会使用一个表，你的菜单项将均匀分布，而不必显式地声明项目的数量的宽度。

如果不是IE 6和7(如果这是关心的)，那么你可以在CSS中做同样的。

Span 1

Span 2

Span 3

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在对此添加的评论中)。

> http://jsfiddle.net/kqHWM/

如果你想要第一个和最后一个菜单元素左右对齐，那么你可以添加以下CSS：

div.demo span:first-child {

text-align: left;

}

div.demo span:last-child {

text-align: right;

}