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>

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

4 个答案:

CSS

HTML