如何创建多列无序列表？

Question

我正在尝试创建一个列表，它应该长成这样：

主要要求是列表应该具有灵活性，可以添加或删除列表项而不需要修改代码。

到目前为止，我找到的最佳解决方案是将所有列表项（包括标题）放入 <li> 标签中，并使用在这篇A List Apart文章中介绍的技术之一进行样式设置。

<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上是否有更好的建议。

- finspin

---

还要看一下masonry。 - mplungjan

所有的项目高度都会相同吗？你可以进行多少预处理（PHP等）？这是一个棘手的问题，HTML和CSS从来没有被设计成适应固定高度布局，事实上，恰恰相反；规范旨在鼓励固定或流体宽度布局，以包裹并补偿任何长度的内容。拥有一个固定高度的div（所以从底部向上包装而不是从右到左）有点违反这个规范。它仍然完全可能！但这完全取决于您对情况的要求。 - Sandy Gifford

@mplungjan 看起来很有趣，谢谢，我会看一下的。 - finspin

@SandyGifford你是指<li>元素吗？是的，它们的高度将是相同的。我基本上可以完全控制预处理，因此我可以使用Django/Python以任何格式生成数据。 - finspin

我已经添加了一个答案，它不依赖于浏览器支持任何CSS或javascript。它是用PHP编写的（我不熟悉Django或Python在服务器端），但应该很容易翻译。 - Sandy Gifford

Answer 1

可能唯一能够干净地实现这一点（不使用JavaScript）是使用column-count CSS属性。但IE仅支持10+版本：http://caniuse.com/multicolumn 以下是演示：http://jsbin.com/efiqov/2/ 此外，标题应该是标题，而不是列表项。

- Ricardo Tomasi

---

CSS的解决方案在垂直对齐方面给我带来了问题。这里有一个使用jquery的实时示例（非常容易）：http://jsfiddle.net/EebVF/5 使用此jquery插件：http://github.com/fzondlo/jquery-columns - newUserNameHere

Answer 2

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

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

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

- smilly92

Answer 3

您可以通过CSS3多列轻松解决这个问题。对于IE浏览器，您也可以使用脚本。请查看链接以获取更多详细信息。

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

- aneeshraj

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属性，它们就会并排堆叠。

- Sandy Gifford

---

这是一个有趣的解决方案，但我想我现在会选择多列CSS解决方案，因为我可以忽略IE（小而封闭的用户群）在这一点上。无论如何，我感谢你的回答。 - finspin

只需记住，这适用于IE和所有旧版浏览器。以下是一个完整的列表，指示最受欢迎的浏览器版本从哪个版本开始支持HTML5：Internet Explorer 9和10 Firefox 7及更高版本 Chrome 14及更高版本 Safari 5及更高版本 Opera 11及更高版本 Mobile Safari 3.2及更高版本 Opera Mobile 5及更高版本 Android 2.1及更高版本 来源。任何版本号较低的浏览器都将不支持该多列布局技术。 - Sandy Gifford

不支持IE 8.0和Firefox 4.0，你立即切断了45％的互联网用户（[来源]（http://royal.pingdom.com/2011/06/17/report-the-most-common-web-browsers-and-browser-versions-today/））。实际上，如果您阅读该源链接（诚然，已经过去一年），您会注意到第一个符合HTML5标准的浏览器是IE 9，但到那时，您已经失去了77.96％的所有浏览器，而且列表中仍有非HTML5兼容的浏览器。你失去的不仅仅是IE。 - Sandy Gifford

这种方法的问题在于你是随意地切割列表，这对于机器人/屏幕阅读器/SEO来说是不好的。至少在JavaScript中进行操作可以保持原始HTML的完整性。 - Ricardo Tomasi

关于机器人和屏幕阅读器的问题，确实存在这样的情况，但解决起来很容易：使用列表。这仍然比使用CSS3剪切掉几乎整个互联网并依赖脚本处理（你应该始终有一个“noscript”备选方案）要好。 - Sandy Gifford

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>

Etc.

少即是多，拥抱简洁！

- user2445736

---

这不会像OP的示例那样布局结果。 - Mr Lister

据我所知，他所拥有的只是一个简单的自动流动多列列表。他是否在说“不触碰代码”，也就是说他可以通过某个外部接口添加新项目，而不必实际添加新的li元素。我对此并不清楚。但就自动流动的多列ul而言，这基本上是所有人所需要的。 - user2445736

Answer 6

你可以使用jQuery-Columns Plugin来轻松实现此功能。例如，要将具有类.mylist的ul分成5列，您可以执行以下操作：

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

这里有一个在jsfiddle上的实时示例

- newUserNameHere