html css - Wie erstellt man mehrere Spaltenlisten?

Question

Ich habe eine "Ordered List", die etwa 100 "List Items" enthält. Dies macht meine Seite sehr lang und Benutzer müssen zu viel scrollen.

Wie kann ich die UL wie diese zeigen:

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

Answer 1

In einer perfekten Welt könnten Sie css3 column module verwenden, aber leider wird es derzeit nur teilweise von Webkit und Gecko Browsern (mit -webkit und -moz) unterstützt.

Answer 2

Wenn Sie nicht die vertikale Ordnung ist egal, aber das Layout:

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

Sie können einfach die li-Elemente dieses Bild Set weg:

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

Es sollte funktionieren. Wenn Sie sie in vertikaler Reihenfolge haben müssen, müssen Sie im PHP-Skript handeln, indem Sie sie in separate divs aufteilen und dann floaten.

Answer 3

Es war an article on A List Apart eine Weile zurück, die genau diese Frage behandelt. Ich denke, wenn das, was dort erwähnt wird, nicht ausreicht, könnten Sie natürlich immer auf serverseitige Codierung oder clientseitige Codierung zurückgreifen, um die Liste automatisch in drei Teile zu unterteilen.

Answer 4

konnte ich die richtige Reihenfolge mit ein wenig jQuery erhalten:

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 
} 

grundlegende Stile für .liCol:

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

Answer 5

Sie können mit 2D verwandelt: sie eine breitere Unterstützung durch moderne haben Browser als CSS3-Spalten. Siehe meine Antwort hier

2 row element layout within horizontal div

Answer 6

Da ich hatte das gleiche Problem und konnte nichts finden „reinigen“ Ich dachte, dass ich meine Lösung geschrieben hatte. In diesem Beispiel verwende ich eine umgekehrte while Schleife, so dass ich splice anstelle von slice verwenden kann. Der Vorteil ist jetzt, dass splice() nur einen Index und einen Bereich benötigt, wo slice() einen Index und die Summe benötigt. Letzteres neigt dazu, beim Looping schwierig zu werden.

Nachteil ist, ich muss den Stapel beim Anhängen umkehren.

Beispiel:

cols = 4; liCount = 35

für Schleife mit Scheibe = [0, 9]; [9, 18]; [18, 27]; [27, 35]

umgekehrt mit splice = [27, 8]; [18, 9]; [9, 9]; [0, 9]

Code:

// @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

habe ich eine Lösung, die für geordnete (nummerierte) Listen funktioniert auch. Diese Listen müssen fortlaufend durch die Spalten nummeriert werden.

Fügen Sie das folgende Skript auf Ihrer Seite (egal wo, nettesten in einem separaten js-Datei ist):

<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> 

Dann können Sie einfach mehrere Spalten Listen wie folgt erstellen:

<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> 

Also, die Einstellung class = "cols" und rel = "[number_of_columns]" und das Skript wird den Rest erledigen!

Answer 8

ich heute Morgen hatte ein ähnliches Problem, wenn Sie nur modernen Browser müssen Sie es auf diese Weise tun könnten:

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

So habe ich in diesen sieht und eine Lösung gefunden, wird funktionieren für alle Browser.

Meine HTML-Liste:

<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> 

Hinweis I die letzten 4 Listenelemente eine Klasse von Second-Liste gab, das ist wichtig für unsere jQuery.

nächste auf meiner Webseite, ich Second-list-appender in der zweiten Spalte, die Spalte Ich mag meine zweite Liste zu sein in.

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>")); 

See, einen div mit der Klasse machte ich eigentlich 2 machen Listen von 1, aber lassen Sie es wie eine Liste in 2 Spalten aussehen, indem Sie den Anfang der zweiten Liste die nächste Nummer der vorherigen Liste geben.

Ich habe es mit 2 Spalten, aber Sie können nur diesen Vorgang wiederholen, oder erstellen Sie eine Funktion und rufen Sie innerhalb einer Schleife für wie oft Sie es wiederholen möchten.

Hoffe, das kann immer noch helfen, einige guckt aus.