html - 如何在多行上均匀划分 UL

Question

我有一个带 block 的无序列表。简化后的代码如下所示:

<ul style="list-style-type: none;">
<li style=" float:left"><table style="width:200px; height:200px">[blockcontent]</table></li>
<li style=" float:left"><table style="width:200px; height:200px">[blockcontent]</table></li>
etc.
</ul>

这将在一行中显示尽可能多的 block ，因为有空间。在一个宽页面上，可能连续有 5 个 block ，之后它会跳到下一行。如果页面较小，它会将 block 数减少到 4、3、2，最后减少到 1。非常基本的响应式设计。

问题是这个“float:left”把所有东西都放在了页面的左边。我想让它均匀地分布在页面的宽度上。

我在网上找到的解决方案都很复杂。我想知道这种问题最简单优雅的解决方案是什么。

这些表格是用来订购其内部零件的表格。对于外部，它们只是 200x200 的固定 block ，也可能是 div。它们永远不会变小或变大。问题在于它们之间的空间。

Answer 1

可以使用 flexbox 实现您正在寻找的内容

请删除内联样式。

并且不需要在这里使用表格。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content:center /* or space-between or space-around*/
}

li {
  flex: 0 200px;
  height: 200px;
  margin: 10px;
  border: 1px solid red;
}

<ul>
  <li>[blockcontent]</li>
  <li>[blockcontent]</li>
  <li>[blockcontent]</li>
  <li>[blockcontent]</li>
  <li>[blockcontent]</li>
  <li>[blockcontent]</li>
  <li>[blockcontent]</li>
  <li>[blockcontent]</li>
  <li>[blockcontent]</li>
  <li>[blockcontent]</li>
  <li>[blockcontent]</li>
  <li>[blockcontent]</li>

</ul>