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

Question

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

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

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

但是，我根本无法解决。

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

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

谢谢！

Answer 1

"Inline Blocks" link 和 Jordan posted 是一个很好的资源，尤其是在涉及旧版浏览器支持时。为了让其他人从 google 登陆此页面以快速参考，创建居中的内联块网格的基本 css 是：

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

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

Answer 2

最简单的解决方案是使用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>

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

Answer 3

根据this StackOverflow 问题，Inline Blocks 可能正是您所需要的。

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

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>