CSS列布局隐藏空列

Question

我用 css 列做了一些事情，我真的很喜欢它们，但是今天我偶然发现了一个我找不到解决方案的问题：

我有一个包含多个列表的页面。这些列表具有动态内容并在小弹出窗口中打开。旧的行为是，列表内容显示在单个列中（普通 HTML <ul>）。新行为应该是它们最多显示在 4 列中。所以我用ul { column-count: 4; } 扩展了我的CSS。这对于包含许多条目的列表非常有效。

现在我的问题是：有时列表中的条目少于 4 个。如果是这种情况，列表的弹出窗口仍然跨越 4 列，仅填充 2 列。因此，填充较少的列表的弹出窗口仍然与填充列表的弹出窗口一样宽。例如：

ul {
  background-color: lime;
  list-style: none;
  column-count: 4;
}

<ul>
<li>entry 1</li>
<li>entry 2</li>
<li>entry 3</li>
<li>entry 4</li>
<li>entry 5</li>
<li>entry 6</li>
<li>entry 7</li>
<li>entry 8</li>
<li>entry 9</li>
<li>entry 10</li>
<li>entry 11</li>
<li>entry 12</li>
</ul>

<ul>
<li>entry 1</li>
<li>entry 2</li>
</ul>

我现在的问题是：如何隐藏那些空列？我想要一个填充较少的列表（条目数 CSS-only 解决方案，因为我不打算计算条目并添加额外的类来减少列数。

元素的显示顺序很重要：从上到下，然后从左到右。

我尝试过使用 flexbox，但我必须为容器设置一个固定宽度，这只会导致弹出窗口太宽。

编辑澄清： 虚线应该是第二个弹出窗口的右边框。 对角线表示我需要离开的空白空间。

编辑进一步的方法： 用户“Gobbin”作为答案发布的另一种方法是使用 flex。但正如我所提到的，我必须设置一些固定宽度。这里它是列表本身的最大宽度，因此包装工作和列表元素的固定宽度。我也不想拥有。这种方法也从左到右然后从上到下列出项目，这也不是我需要的：

ul {
  list-style: none;
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 16em;
  float: left;
  clear: both;
}

li {
  background-color: lime;
  width: 4em;
}

<ul>
<li>entry 1</li>
<li>entry 2</li>
<li>entry 3</li>
<li>entry 4</li>
<li>entry 5</li>
<li>entry 6</li>
<li>entry 7</li>
<li>entry 8</li>
<li>entry 9</li>
<li>entry 10</li>
<li>entry 11</li>
<li>entry 12</li>
</ul>

<ul>
<li>entry 1</li>
<li>entry 2</li>
</ul>

Answer 1

也许这是您的一个选择，尽管列分布在可用宽度上。

var maxColumns = 4;
$("ul").each(function() {
  var numColumns = $(this).find("li").length;
  $(this).css("column-count", numColumns);
  $(this).css("width", 25*numColumns + "%");
});

ul {
  background-color: lime;
  list-style: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>entry 1</li>
  <li>entry 2</li>
  <li>entry 3</li>
  <li>entry 4</li>
</ul>

<ul>
  <li>entry 1</li>
  <li>entry 2</li>
</ul>

Answer 2

我认为这是您想要的布局。编辑了我的答案，因为列表项仍然有边距。

ul {
  list-style: none;
    display: inline-flex;
    float: left;
    clear: both;
}
li{
   background-color: lime;
   width: 100%;
   display: inline;
}

<ul>
<li>entry 1</li>
<li>entry 2</li>
<li>entry 3</li>
<li>entry 4</li>
</ul>

<ul>
<li>entry 1</li>
<li>entry 2</li>
</ul>