如何制作多列无序列表？

Question

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

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

我到目前为止找到的最佳解决方案是将所有列表项（包括标题）放入<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上是否有更好的建议。

Answer 1

你可以使用column-count CSS属性来干净地实现这一目标（没有javascript）。 IE仅支持10+以上：http://caniuse.com/multicolumn

以下是演示：http://jsbin.com/efiqov/2/

此外，标题应该是标题，而不是列表项。

Answer 2

只要您不需要支持旧浏览器，您就可以使用CSS3多列...

http://www.quirksmode.org/css/multicolumn.html

然后只为每个类别使用无序列表。

Answer 3

您可以使用css3多列轻松克服此问题。对于ie浏览器，您也可以使用脚本。请参阅链接了解更多详情

http://www.cvwdesign.com/txp/article/360/multi-column-layout-with-css3-and-some-javascript

Answer 4

由于您完全有能力进行预处理并且具有固定高度<li>，因此请考虑PHP中的以下内容：

$menu=array(
    "header" => "Drinks",
    "item" => "Drink 1",
    "item" => "Drink 2",
    "item" => "Drink 3",
    "item" => "Drink 4",
    "header" => "Meats",
    "item" => "Meat 1",
    "item" => "Meat 2",
    "item" => "Meat 3",
    "item" => "Meat 4"
);

$item_count = 0;
$items_per_column = 5;

echo "<ul>";
foreach($menu as $key=>$value)
{
    if($item_count % $items_per_column == 0)
    {
        echo "</ul><ul>";
    }

    $item_count ++;

    echo "<li class='".$key."'>".$value."</li>";
}
echo "</ul>";

那是未经测试的，但应该工作得很好。只需给每个<ul>一个float: left，它们就会相互堆叠。

Answer 5

从根本上说，这就是你所需要的，没有css3，js或php，适用于任何浏览器的任何版本等。

四栏

li {width: 25%; float: left;}

<ul>
<li>content</li>
<li>content</li> etc.
</ul>

三栏

li {width: 33%; float: left;}

<ul>
<li>content</li>
<li>content</li> etc.
</ul>

等

少即是多，拥抱简约！

Answer 6

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

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

这是live example on jsfiddle