Javascript 如何制作多列无序列表？

我正在尝试创建一个如下所示的项目列表：

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

到目前为止，我找到的最佳解决方案是将所有列表项（包括标题）放入

标记中，并使用本文介绍的其中一种技术对其进行样式设置：

饮料
喝一杯
饮料2
喝3
肉
肉1
肉2
肉3
肉4
肉5
肉6
等

---

我想知道这里是否有更好的关于堆栈溢出的建议。

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

---

然后对每个类别使用无序列表

在没有javascript的情况下，实现这一目标的唯一方法可能是使用

列计数

CSS属性。IE仅从10+开始支持它，但：

下面是一个演示：

---

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

使用css3 multi-colum可以轻松克服这一问题。对于ie浏览器，您也可以使用脚本。有关更多详细信息，请参阅链接

---

< P>因为你有完全的预处理能力和固定的高度<代码>

<代码>，请考虑下面的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>";

$menu=array(
“标题”=>“饮料”，
“项目”=>“饮料1”，
“项目”=>“饮料2”，
“项目”=>“饮料3”，
“项目”=>“饮料4”，
“头”=>“肉”，
“项目”=>“肉1”，
“项目”=>“肉2”，
“项目”=>“肉3”，
“项目”=>“肉4”
);
$item_count=0；
每列$items\u=5；
回声“
”；
foreach（$key=>$value的菜单）
{
如果（$item_count%$items_per_column==0）
{
回声“
”；
}
$item_count++；
回显“
“$value.”
”；
}
回声“
”；

---

这是未经测试的，但应该可以正常工作。只需给每个

一个

浮点：左

，它们就会堆叠在一起。

基本上，这就是您所需要的一切，没有css3、js或php，在任何版本的浏览器中都可以工作，等等

四列

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

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

li{宽度：25%；浮点：左；}

内容
内容
等。

三列

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

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

li{宽度：33%；浮点：左；}

内容
内容
等。

等等

---

少即是多，拥抱简单

您可以很容易地做到这一点，例如将一个ul和一个.mylist类拆分为5列

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

---

这里有一个

也看看所有的物品是否都一样高？你能做多少预处理（PHP等）？这是一个困难的问题，HTML和CSS从来没有被用来适应固定高度的布局，事实上，恰恰相反；规范旨在鼓励固定宽度或流体宽度的布局，包装和补偿任何长度的内容的高度。有一个固定高度的div（从下到上，而不是从右到左）有点相反。这仍然是完全可能的！但这完全取决于您对情况的要求。@mplungjan看起来很有趣，谢谢，我来看看。@SandyGifford您是指

项目吗？是的，它们的高度相同。我基本上可以完全控制预处理，因此我可以生成任何格式的数据（使用Django/Python）。我在下面添加了一个答案，它不依赖于支持任何
CSS
或
javascript
的浏览器。它是用PHP编写的（我不熟悉服务器端的Django或Python），但它应该不难翻译。这是一个有趣的解决方案，但我认为我现在将使用多列CSS解决方案，因为我可以在这一点上忽略IE（一小部分封闭的用户）。无论如何，我感谢你的回答。记住，这是IE和所有旧浏览器。下面是一个完整的列表，显示了最流行的浏览器的哪些版本开始支持HTML5：Internet Explorer 9和10 Firefox 7和更高版本的Chrome 14，更高版本的Safari 5和更高版本的Opera 11，更高版本的Mobile Safari 3.2，更高版本的Opera Mobile 5和更高版本的Android 2.1和更高版本。任何版本号较低的浏览器都不支持这种多列布局技术。如果不支持IE 8.0和Firefox 4.0，您将立即切断前45%的互联网用户（）。事实上，如果你仔细阅读这个源代码链接（无可否认，它已经有一年历史了），你会注意到第一个兼容HTML5的浏览器是IE9，但到那时，你已经失去了77.96%的浏览器，而且列表中还有一些不兼容HTML5的浏览器。这不仅仅是IE的失败。像这样的方法的问题是你随意地削减列表，这对机器人/屏幕阅读器/搜索引擎优化不利。使用javascript至少可以保持原始HTML的正常运行。关于机器人和屏幕阅读器，这是一个非常简单的修复方法：列表。还是比用CSS3删掉几乎整个互联网更好，并且依靠脚本（你应该总是有一个
noscript
备选方案），它不会像OP的例子那样布局结果。据我所知，他只有一个简单的自动流动的多列列表。他说的是“不接触代码”，比如他可以通过一些外部接口添加新的项目，实际上是添加新的李。我不知道。但对于自动流动的多列ul来说，这基本上是所有人所需要的。CSS解决方案给了我垂直对齐的问题。下面是一个如何使用jquery（非常简单）的实时示例：使用此jquery插件：
$(document).ready( function () {
  $('.mylist').cols(5);
});