html的CSS - 如何创建多列列表？

Question

我有一个“有序列表”，其中包含约100个“列表项目”。这使得我的页面很长，用户必须滚动得太多。

我怎样才能获得UL，显示是这样的：

1.   6.   11. 
2.   7.   12. 
3.   8.   13. 
4.   9.   14. 
5.   10.   15. 

Answer 1

在完美的世界中，您可以使用css3 column module，但遗憾的是，它目前仅部分受到webkit和壁虎浏览器（使用-webkit和-moz）的支持。

Answer 2

如果你没有关系的垂直顺序，但布局：

1.  2.  3.  4. 
5.  6.  7.  8. 
9.  10.  11.  12. 

你可以简单的设置li元素此方式：

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

它应该工作。如果你需要在垂直顺序中使用它们，你需要在php脚本中将它们分成不同的div，然后将它们浮动。

Answer 3

有一个an article on A List Apart一阵子回来，其中涵盖了这个问题。我猜如果提到的东西不够用，你当然可以总是回到服务器端编码或客户端编码，以三部分自动分割列表。

Answer 4

我能有一点jQuery来得到正确的排序：

function splitList($list, n) { 
    var i, k; 
    var colHeight = Math.ceil($list.children().length/n) 
    var colWidth = Math.floor(100/n) + "%" 

    for (i = 0; i < n; i++) { 
     $list.append("<ul class='liCol'></ul>") 
     for (k = 0; k < colHeight; k++) { 
      $list.children("li").eq(0).appendTo(".liCol:last")   
     } 
    } 

    $(".liCol").css("width", colWidth) 
    $list.show() // list originally hidden to avoid displaying before ready 
} 

基本样式.liCol：

.liCol { 
    padding: 0px; 
    margin: 0px; 
    float: left; 
} 

Answer 5

您可以使用2D转换：他们有现代更广泛的支持浏览器比CSS3列。看到这里

2 row element layout within horizontal div

Answer 6

因为我有同样的问题，但没有找到任何东西“干净”我想我贴我的解决方案我的答案。在这个例子中，我使用反转的while循环，因此我可以使用splice而不是slice。现在的优势是splice（）只需要一个索引和一个范围，其中slice（）需要索引和总数。后者在循环时往往变得困难。

缺点是我需要在追加时反转堆栈。

实施例：

COLS = 4; liCount = 35

for slice with slice = [0，9]; [9，18]; [18,27]; [27，35]

当splice = [27,8]; [18，9]; [9，9]; [0,9]

代码：

// @param (list): a jquery ul object 
// @param (cols): amount of requested columns 
function multiColumn (list, cols) { 
    var children = list.children(), 
     target = list.parent(), 
     liCount = children.length, 
     newUl = $("<ul />").addClass(list.prop("class")), 
     newItems, 
     avg = Math.floor(liCount/cols), 
     rest = liCount % cols, 
     take, 
     stack = []; 

    while (cols--) { 
     take = rest > cols ? (avg + 1) : avg; 
     liCount -= take; 

     newItems = children.splice(liCount, take); 
     stack.push(newUl.clone().append(newItems)); 
    } 

    target.append(stack.reverse()); 
    list.remove(); 
} 

Answer 7

我创建了一个解决方案，也适用于排序（编号）列表。这些列表必须通过列继续编号。

将以下脚本添加到您的网页（不身在何处，最好是在一个单独的JS文件）：

<script type="text/javascript"> 
// As soon as the document's structure has been loaded: 
document.addEventListener("DOMContentLoaded", function() { 
    // For each html elem: 
    elems = document.getElementsByTagName("*"); // OL and UL wanted: chose all (*) here and select later. 
    for (var e = 0; e < elems.length; e++) { 
     // Check if elem is a list (ordered/unordered) and has class name "cols": 
     if ((elems[e].tagName == "OL" || elems[e].tagName == "UL") && elems[e].className.search("cols") > -1) { 
      // Collect list items and number of columns (from the rel attribute): 
      var list = elems[e]; 
      var listItems = list.getElementsByTagName("LI"); 
      var Ncols = list.getAttribute("rel")*1; // *1 converts rel from string to int. 
      // Determine total number of items, items per column and column width: 
      var Ntotal = listItems.length; 
      var Npercol = Math.ceil(Ntotal/Ncols); 
      var colWidth = Math.floor(100/Ncols)+"%"; 
      // For each column: 
      for (var c = 0; c < Ncols; c++) { 
       // Create column div: 
       var colDiv = document.createElement("DIV"); 
       colDiv.style.cssFloat = "left"; 
       colDiv.style.width = colWidth; 
       // Add list items to column div: 
       var i_start = c*Npercol; 
       var i_end = Math.min((c+1)*Npercol, Ntotal); 
       for (var i = i_start; i < i_end; i++) 
        colDiv.appendChild(listItems[0]); // Using listItems[0] instead of listItems[i], because items are moved to colDiv! 
       // Add column div to list: 
       list.appendChild(colDiv); 
      } 
     } 
    } 
}); 
</script> 

然后，你可以简单地创建多个列清单是这样的：

<ol class="cols" rel="3"> 
    <li>A</li> 
    <li>B</li> 
    <li>C</li> 
    <li>D</li> 
    <li>E</li> 
    <li>F</li> 
    <li>G</li> 
</ol> 

因此，设置class =“cols”和rel =“[number_of_columns]”，脚本将完成剩下的工作！

Answer 8

我今天早上也有类似的问题，如果你只需要现代的浏览器，你可以这样来做：

ul 
{ 
    list-style-type: none; 
    counter-reset: section; 

    -moz-column-count: 3; 
    -moz-column-gap: 20px; 
    -webkit-column-count: 3; 
    -webkit-column-gap: 20px; 
    column-count: 3; 
    column-gap: 20px; 
} 

ul li 
{ 
    padding-left: 30px; 
    position: relative; 
} 

ul li:before 
{ 
    counter-increment: section; 
    content: counter(section) "."; 
    margin: 0 0 0 -34px; 
    text-align: right; 
    width: 2em; 
    display: inline-block; 
    position: absolute; 
    height: 100%; 
} 

jsfiddle

Answer 9

所以我已经研究过这一点，并找到了一个解决方案，适用于所有浏览器。

我的HTML列表：

<ol class="list-items"> 
    <li>Item1</li> 
    <li>Item2</li> 
    <li>Item3</li> 
    <li>Item4</li> 
    <li class="second-list">Item5</li> 
    <li class="second-list">Item6</li> 
    <li class="second-list">Item7</li> 
    <li class="second-list">Item8</li> 
</ol> 

通知我把过去的4列表项一类的第二列表，这是对我们的jQuery重要。

接下来，在我的网页，我在第二列由带班第二列表的appender一个div的专栏中，我想我的第二个名单是英寸

var secondListStart = $(".list-items").children().length - 3; 

$(".second-list-appender").append($("<ol start=" + secondListStart + ">")); 
$(".second-list-appender ol").append($(".second-list")); 
$(".second-list-appender").append($("</ol>")); 

见，我实际上使2从1中列出，但是使它看起来像2列中的一个列表，通过给第二个列表的开头提供前一个列表的下一个数字。

我做了2列，但你可以重复这个过程，或者创建一个函数，然后在循环内调用多少次你想重复它。

希望这仍然可以帮助一些窥视。