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列，但你可以重複這個過程，或者創建一個函數，然後在循環內調用多少次你想重複它。

希望這仍然可以幫助一些窺視。