html - 如何在几行上平均分配UL

我有一个无序的列表。简化后的代码如下：

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

这将连续显示有足够空间的块。在宽页面上，可能连续有5个块，然后跳到下一行。如果页面较小，则会将块数减少到4,3,2，最后是1。非常基本的响应式设计。

问题在于此“ float：left”将所有内容都放在页面的左侧。我想让它均匀地分布在页面的整个宽度上。

我在互联网上找到的解决方案都很复杂。我想知道什么是最简单，最优雅的解决方案。

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

最佳答案

您正在寻找的东西可以使用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>

关于html - 如何在几行上平均分配UL，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43497036/