如何布局列表项目像一个网格的CSS和HTML？ [英] How to lay-out list items like a grid with CSS and HTML?

问题描述

我有一个div块，它不会具有固定的宽度。

I have a div block which does not have a fixed width.

里面有一个 ; ul> < li> ..< / li> 阻止与11项。
我想这些< li> 项目列在div中，所有宽度都相同，如下所示：

Inside, I have an <ul> <li>..</li> block with 11 items. I would like these <li> items to be listed inside the div, all with equal widths like this:

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

$

我尝试左右浮动，但中央的3个元素不会

I tried float left and right but the central 3 elements will not be centered.

我能做些什么才能使这项工作成功？

What can I do to get this working?

谢谢！ $ b

推荐答案

链接 Jordan上面是一个伟大的资源，特别是当涉及到老的浏览器支持。为了快速参考其他人在google上离开这个网页，创建一个居中的，内联块网格的基本css是：

The link Jordan posted above is a great resource, particularly when it comes to older browser support. For quick reference for others landing on this page off of google, the basic css for creating a centered, inline-block grid is:

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

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

这篇关于如何布局列表项目像一个网格的CSS和HTML？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！