列在多列中

Question

我有一个包含10个（li）元素的列表。这些显示在单列中。

如果我修正了该列表的高度，那么如何在两列或三列中显示它？

Answer 1

您可以查看此multiple column lists

Answer 2

有一个CSS3解决方案，但它尚未被浏览器广泛实现。请参阅此示例，使用CSS属性column-count：

http://jsfiddle.net/hwzpy/

目前仅适用于FF，Safari和Chrome。否则，您将必须使用javascript或将列表分成两个列表。

CNC中 在其他答案中链接的浮动变体非常整洁，不知道那个。

Answer 3

之前已经问过这个问题。见html css - how to create multiple column list?的讨论。还有一个有用的A List Apart article，其中包含六种执行此操作的方法。

Answer 4

您可以使用jQuery-Columns Plugin轻松完成此操作，例如将带有.mylist类的ul拆分为5个列

$(document).ready( function () {
  $('.mylist').cols(5);
});

这里是live example on jsfiddle