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

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

在里面，我有一个

。

块，包含11项。 我希望这些

项目列在div中，所有项目的宽度都相同，如下所示：

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

然而，我一点也不能解决它

我试着左右浮动，但中间的3个元素不会居中

我该怎么做才能让它工作

---

谢谢

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

（不包括前缀）

ul{
栏目：3个；
}

a
b
c
d
e
f
g
h
我
j
k

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

根据StackOverflow问题，可能正是您需要的

哦，如果你还没有实现它，一定要调查一下。如果你不想自己构建CSS网格，那就太棒了。

这是一个很好的资源，尤其是当涉及到较旧的浏览器支持时。为了便于其他人在google上登陆此页面时快速参考，创建居中内联块网格的基本css是：

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

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

CSS HTML

第1栏第1项
第1栏第2项
第1栏第3项
第1栏第4项
第2栏第1项
第2栏第2项
第2栏第3项
第三栏第1项
第三栏第2项
第3栏第3项
第3栏第4项

您能提供相关的标记和CSS吗？您可能只需要为每个

LI

指定一个宽度即可。JSFIDLE示例不适用于my chrome only 1列，也不适用于IEOld。有关兼容性，请参阅的底部。是否有这样一个简单的解决方案，但您希望元素首先向右（水平）移动，而不是向下移动？

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

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

ul {
  display: grid; 
  grid-auto-columns: 1fr; 
  grid-auto-rows: 1fr; 
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-rows: 1fr 1fr 1fr 1fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    "col1-item1 col2-item1 col3-item1"
    "col1-item2 col2-item2 col3-item2"
    "col1-item3 col2-item3 col3-item3"
    "col1-item4 col2-item3 col3-item4"; 
}

/* Assign a class to each li */
    /* Column 1 */
.col1-item1 { grid-area: col1-item1; }
.col1-item2 { grid-area: col1-item2; }
.col1-item3 { grid-area: col1-item3; }
.col1-item4 { grid-area: col1-item4; }
    /* Column 2 */
.col2-item1 { grid-area: col2-item1; }
.col2-item2 { grid-area: col2-item2; }
.col2-item3 { grid-area: col2-item3; }
    /* Column 3 */
.col3-item1 { grid-area: col3-item1; }
.col3-item2 { grid-area: col3-item2; }
.col3-item3 { grid-area: col3-item3; }
.col3-item4 { grid-area: col3-item4; }

<ul>
    <!-- Column 1 -->
    <li class="col1-item1">col1 item 1</li>
    <li class="col1-item2">col1 item 2</li>
    <li class="col1-item3">col1 item 3</li>
    <li class="col1-item4">col1 item 4</li>

    <!-- Column 2 -->
    <li class="col2-item1">col2 item 1</li>
    <li class="col2-item2">col2 item 2</li>
    <li class="col2-item3">col2 item 3</li>

    <!-- Column 3 -->
    <li class="col3-item1">col3 item 1</li>
    <li class="col3-item2">col3 item 2</li>
    <li class="col3-item3">col3 item 3</li>
    <li class="col3-item4">col3 item 4</li>
</ul>