浮动<li> s，但保持对齐</li>

Question

我想保持<li>在顶部均匀对齐，这是我的CSS：

ul {
   list-style-type:none;
   margin:0;
   padding:0;
   width:510px; 
}

li {
   width:230px;
   border:1px solid #ccc;
   padding:5px;
   float:left;
   margin:5px 5px 0 0;  
}

这是in action。

是否可以均匀地对齐<li>的顶部？ 这是我希望它的图片：

Answer 1

取而代之的是float，请使用display: inline-block; vertical-align: top;

http://jsfiddle.net/t6tML/11/

Answer 2

ul的宽度需要等于li元素的组合宽度：

ul {
    list-style-type:none;
    margin:0;
    padding:0;
    width: 1482px;
}

每个li元素的宽度为230px，水平边距为5px，水平边距为10px，水平边框为2px，所以：

230 + 5 + 10 + 2 = 247px

247 * 6 li elements = 1482px

完整代码：http://jsfiddle.net/t6tML/3/