如何使用CSS和HTML将列表项布局成网格形式？

Question

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

其中，我有一个包含11个项目的

• ...

块。 我希望这些

项目在div内列出，宽度都相等，如下所示：

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

然而，我完全无法将它排序。

我尝试了左浮动和右浮动，但是中心的三个元素无法居中。

我该怎么做才能让它正常工作呢？

谢谢！

- Phil

---

你能否包含相关的标记和CSS？你可能只需要为每个“LI”指定一个宽度。 - Kevin Boucher

Answer 1

Jordan 发布的"行内块"链接是一个很好的资源，特别是对于旧浏览器的支持。为了方便其他通过谷歌搜索而来到这个页面的人们快速参考，创建一个居中的行内块网格的基本CSS样式如下：

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

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

- FreedomMan

Answer 2

最简单的解决方案是使用CSS列：https://developer.mozilla.org/zh-CN/docs/Web/CSS/columns： 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>

这将尽最大努力使列相等。但是，如果没有足够的元素完全相等，它将从右侧开始删除元素，而不是中心。

- cimmanon

---

jsfiddle示例在我的Chrome浏览器中无法工作，只有1列。 - Dukeatcoding

它也不适用于IEOld。请参见https://developer.mozilla.org/en-US/docs/Web/CSS/columns底部的兼容性。 - Jeromy French

有没有像这样简单的解决方案，但是您希望元素首先向右（水平）移动，而不是向下移动？ - Ela782

Answer 3

根据这个 StackOverflow 问题，Inline Blocks 可能是您需要的东西。

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

- Jordan Thornquest

Answer 4

CSS

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; }

HTML

<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>

这里是示例代码：https://jsfiddle.net/omarjuvera/p3wajehs/2/
你也可以在这里运行代码

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>

- Omar