如何使用CSS和HTML布局列表项如网格？

Question

我有一个没有固定宽度的div块.

在里面,我有<ul> <li>..</li>11块物品.我希望这些<li>项目在div中列出,所有宽度都相同,如下所示:

##item##  ##item##  ##item##
##item##  ##item##  ##item##
##item##  ##item##  ##item##
##item##            ##item##

但是,我根本无法解决它.

我尝试左右浮动但中心3个元素不会居中.

我该怎么做才能让这个工作？

谢谢!

Answer 1

在"内联块"链接是乔丹发布是一个很好的资源,特别是当它涉及到旧的浏览器的支持.为了快速参考从google登陆此页面的其他人,用于创建居中的内联块网格的基本css是:

ul {
    margin: 0 auto;
    text-align: center;
}

li {
    display: inline-block;
    vertical-align: top;
}

Answer 2

最简单的解决方案是使用CSS列:

http://jsfiddle.net/6tD2D/(不包括前缀)

ul {
    columns: 3;
}

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
    <li>g</li>
    <li>h</li>
    <li>i</li>
    <li>j</li>
    <li>k</li>
</ul>

这将尽可能均衡列.但是,如果没有足够的元素完全相等,它将开始从右侧而不是中心移除它们.