如何使用 CSS 和 HTML 布置诸如网格之类的列表项？

How to lay-out list items like a grid with CSS and HTML?

提问by Phil

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

我有一个没有固定宽度的 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:

在里面，我有一个<ul> <li>..</li>包含 11 个项目的块。我希望将这些<li>项目列在 div 中，所有项目的宽度都相同，如下所示：

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

However, I can't sort it out at all.

但是，我根本无法解决它。

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

我试过向左和向右浮动，但中间的 3 个元素不会居中。

What can I do to get this working?

我该怎么做才能让它发挥作用？

Thanks!

谢谢！

回答by FreedomMan

The "Inline Blocks" linkthat Jordan postedis 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:

在“内联块”链接是乔丹发布是一个很好的资源，特别是当它涉及到旧的浏览器的支持。为了让其他人在谷歌之外的页面上快速参考，创建居中的内联块网格的基本 css 是：

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

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

回答by cimmanon

The simplest solution is to use CSS columns:

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

http://jsfiddle.net/6tD2D/(prefixes not included)

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>

This will equalize the columns as best it can. However, if there aren't enough elements to be perfectly equal, it will start removing them from the right instead of the center.

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

回答by Jordan Thornquest

According to thisStackOverflow question, Inline Blocksmay be just what you need.

根据这个StackOverflow 问题，内联块可能正是您所需要的。

Oh, and if you aren't implementing it already, be sure to look into CSS Grids, too. If you don't want to build a CSS grid yourself, this oneis fantastic.

哦，如果您还没有实现它，请务必也查看CSS Grids。如果您不想自己构建 CSS 网格，那么这个非常棒。