我正在尝试创建一个看起来像这样的项目列表:
主要要求是列表应该灵活,以便可以在不触及代码的情况下添加或删除列表项.
到目前为止,我找到的最佳解决方案是将所有列表项(包括标题)放入< li>使用此A List Apart article中提供的技术之一标记和设置它们:
<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上是否有更好的建议.
解决方法
可能你可以干净利落地实现这一目标(没有javascript)的唯一方法就是使用column-count CSS属性. IE仅从10支持它:
http://caniuse.com/multicolumn
这是一个演示:http://jsbin.com/efiqov/2/