如何制作多列无序列表？

Question

我正在尝试创建一个看起来像这样的项目列表:

主要要求是列表应该灵活,以便可以在不触及代码的情况下添加或删除列表项.

到目前为止,我发现的最佳解决方案是将所有列表项(包括标题)放入<li>标记中,并使用此A List Apart文章中提供的技术之一对其进行样式设置:

<ul>
  <li class="header">Drinks</li>
  <li>Drink 1</li>
  <li>Drink 2</li>
  <li>Drink 3</li>
  <li class="header">Meat</li>
  <li>Meat 1</li>
  <li>Meat 2</li>
  <li>Meat 3</li>
  <li>Meat 4</li>
  <li>Meat 5</li>
  <li>Meat 6</li>
  etc.
</ul>

我想知道Stack Overflow上是否有更好的建议.

Answer 1

可能你可以干净利落地完成这个(没有javascript)的唯一方法就是使用column-countCSS属性.IE仅支持10+以上:http://caniuse.com/multicolumn

这是一个演示:http://jsbin.com/efiqov/2/

此外,标题应该是标题,而不是列表项.