如何使用css列将列宽调整为内容大小？

Question

我正在使用css列（不是表格）来创建跨越3列的列表，如下所示：

HTML

<ul>
  <li>- Item 1 - this is the item's name here.</li>
  <li>- Item 2</li>
  <li>- Item 3</li>
  <li>- Item 4</li>
  <li>- Item 5</li>
  <li>- Item 6</li>
  <li>- Item 7</li>
  <li>- Item 8</li>
</ul>

CSS

ul {
  column-count: 3;
  max-width: 40rem;
}

如何显示

但是，所有列的宽度都相等，这会导致它们之间的间距不同。如何调整css列以获得类似这样的内容，其中每列的宽度取决于内容？

我想要实现的目标：

谢谢！

编辑：我应该提一下，我需要使用CSS列，因为这些项目列表是通过CMS动态生成的，所以如果可能的话，我们希望找到一个纯粹的CSS解决方案，以避免引入Javascript来操纵DOM。谢谢。

Answer 1

仅适用于信息，因为此时只是实验性的：

  

可以在few browsers，

中测试      

另见http://caniuse.com/#search=grid

     

其他https://css-tricks.com/snippets/css/complete-guide-grid/

教程

因此有一天display:grid会有所帮助：但是，布局仍然是每行喷出的行

＆＃13;

＆＃13;

ul {
  padding: 1em ;
  margin: 2em;
  border: solid 1px;
  list-style-type: none;
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-gap: 0 2em;
}

＆＃13;

<ul>
  <li>- Item 1 - this is the item's name here.</li>
  <li>- Item 2</li>
  <li>- Item 3</li>
  <li>- Item 4</li>
  <li>- Item 5</li>
  <li>- Item 6</li>
  <li>- Item 7</li>
  <li>- Item 8</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

如果您使用服务器端的例程或javascript 来计算您的项目，那么您可以强制它们按列喷涂：（例如通过js / jQuery：{{3播放并添加/删除lis）

＆＃13;

＆＃13;

ul {
  padding: 1em 1em 1em 4em;
  margin: 2em;
  border: solid 1px;
  list-style-type: none;
  display: grid;
  grid-gap: 0 2em;
  padding:1em ;
  grid-template-columns: 0 auto auto 1fr;/* last one set to use all room left */
  grid-auto-flow: column;
}

/* span a first-element throgh all rows , to be injected and updated from server side or via javascript on the fly */
ul:before {
  content: '';
  grid-column: 1;
  /* short hand : grid-row:1/4;*/
  grid-row-start: 1;
  grid-row-end: 4;/* value to updated to match row numbers + 1 */
}

＆＃13;

<ul>
  <li>- Item 1 - this is the item's name here.</li>
  <li>- Item 2</li>
  <li>- Item 3</li>
  <li>- Item 4</li>
  <li>- Item 5</li>
  <li>- Item 6</li>
  <li>- Item 7</li>
  <li>- Item 8</li>
</ul>

＆＃13;

＆＃13;

＆＃13;