javascript – 如何制作多列无序列表?

前端之家收集整理的这篇文章主要介绍了javascript – 如何制作多列无序列表?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试创建一个看起来像这样的项目列表:

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

到目前为止,我找到的最佳解决方案是将所有列表项(包括标题)放入< 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/

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

猜你在找的JavaScript相关文章