Question

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

<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。它们永远不会变小或变大。问题是他们之间的空间。

Answer 1

使用flexbox

可以实现您的目标

请删除内联样式。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用以下设置使ul成为灵活容器：

（但在这种情况下删除浮动）

＆＃13;

ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

li {
  background: #ddd;
  margin-top: 2px;
}

＆＃13;

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

＆＃13;

Answer 3

只需将CSS列添加到ul并使用列宽控制它。

ul {
 column-width: 200px;
 column-fill: balance;
}
li { break-inside: avoid; }

break-inside: avoid;上的

li会阻止li破坏列。

小提琴游乐场： https://jsfiddle.net/nc4ah4ta/

<强>段：

＆＃13;

ul {
 column-width: 200px;
 column-fill: balance;
}
li { break-inside: avoid; }
table { border: 1px solid #ddd; }

＆＃13;

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

＆＃13;

如果您仅使用表格创建块，那么您实际上并不需要这些。

<强>段：

＆＃13;

ul {
 column-width: 200px;
 column-fill: balance;
}
li { break-inside: avoid; padding: 12px; }

＆＃13;

<ul style="list-style-type: none;">
<li>[blockcontent]</li>
<li>[blockcontent]</li>
<li>[blockcontent]</li>
<li>[blockcontent]</li>
<li>[blockcontent]</li>
</ul>

＆＃13;

您可以使用column-count微调您的布局以控制列数。这与媒体查询相结合，可以让您进一步完善其响应能力。

column-gap将允许您定义列之间间隙的宽度。

而column-rule将允许您在列之间使用分隔符。

如何在多行上均匀划分UL

3 个答案: