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>

我现在的问题是：如何隐藏那些空列？我想要一个填充较少的列表（条目数＆lt; 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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;