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>

我现在的问题是：我如何隐藏那些空列？我想要一个填充较少的列表（条目数<4）的弹出窗口要比带有完整填充列表的弹出窗口宽一些。我想找到一个只有CSS的解决方案，因为我不打算计算条目并添加额外的类来减少列数。

显示元素的顺序很重要：自上而下，然后是左右。

我尝试过使用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>