css - 向左飘浮s，但保持对齐

Question

我想保持<li>s 在顶部均匀对齐，这是我的 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;  
}

这是在行动。

<li>有什么办法可以均匀地对齐 s 的顶部？
这是我想要的图片：

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 元素的宽度为 230 像素，水平边距为 5 像素，水平边距为 10 像素，水平边框为 2 像素，因此：

230 + 5 + 10 + 2 = 247 像素

247 * 6 li 元素 = 1482px

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