我如何用css或javascript订购这样的html列表

How can i order an html list like this with css or javascript?

本文关键字：html 列表 何用 css javascript      更新时间：2024-05-25

我想按此顺序订购项目列表（附图片）。每列应该有5行，然后接下来的5行得到另一列并继续。。。

这个列表是通过sql查询动态生成的，在li标记上有一个循环。

所以我只需要找到一种在javascript或css中以这种方式排序的方法。。。

示例

了解多列环境。该规范目前是一个候选推荐，所以它不应该有太大的变化。请记住，这在版本10之前的IE中没有实现，但是有一个JavaScript回退应该可以工作，即使在列表中也是如此。

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
</ol>

ol{
    -moz-column-count:2;
    -webkit-column-count:2;
    column-count: 2;
}

请注意，您必须在某个位置指定列的实际数量。但是，如果SQL查询的每条记录都等于一个项，则可以使用类似count($result)/5的内容。

演示

您可以在这里找到一个很好的例子。http://www.alistapart.com/d/multicolumnlists/example1.htmlenter此处的链接描述

您还可以创建以1、6和11开头的3个列表。在这种情况下，您根本不需要css或js。像这样：

<ol start="1">....</ol>
<ol start="6">....</ol>
<ol start="11">....</ol>
相关文章：