我正在尝试创建一个看起来像这样的项目列表:
主要要求是列表应该灵活,以便可以在不触及代码的情况下添加或删除列表项.
到目前为止,我找到的最佳解决方案是将所有列表项(包括标题)放入< 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/