Sortieren html ul/li-Liste in alphabetischer vertikale Blöcke
Hier ist ein problem, das ich laufen in jedes jetzt und dann, dass ich in der Regel versuchen Sie, und lösen Sie aus einem back-end-Perspektive, würde aber gerne wissen, ob es eine Magische Lösung, die andere gefunden haben, um dieses Problem zu lösen, die auf dem front-end.
Gegeben, ein ul/li-Liste, in der markup-alphabetisch von a-z:
<ul>
<li>Alpha</li>
<li>Bravo</li>
<li>Charlie</li>
<li>Delta</li>
<li>Echo</li>
<li>Foxtrot</li>
<li>Golf</li>
<li>Hotel</li>
<li>India</li>
<li>Juliet</li>
<li>Kilo</li>
<li>Lima</li>
<li>Mike</li>
<li>November</li>
<li>Oscar</li>
<li>Papa</li>
<li>Quebec</li>
<li>Romeo</li>
<li>Sierra</li>
<li>Tango</li>
<li>Uniform</li>
<li>Victor</li>
<li>Whiskey</li>
<li>X-ray</li>
<li>Yankee</li>
<li>Zulu</li>
</ul>
In der Regel, es ist sehr einfach zu schweben die Elemente, die Links und Sortieren Sie diese optisch horizontal in Blöcken, wie:
Jedoch zu Spalten, wie das ist:
Hatte ich schon immer zu brechen, die HTML in separaten Einheiten, wie vier separate <ul>
- Elemente im obigen Beispiel.
Gibt es eine Möglichkeit, es zu halten all in one ul-Liste ohne zusätzliches markup mit CSS (kein JavaScript), um eine säulenartige Aussehen wie im zweiten Bild oben? Meine Vermutung ist "Nein", aber ich habe gesehen, einige Zauber vor, und ich möchte die Antwort auf diese mehr endgültig.
- Dies ist die beste info, die ich finden kann auf dieser: novitskisoftware.com/test/multiplecolumnsEms.html
- versuchen Sie dieses, nicht aus dem Sinn stackoverflow.com/questions/13855624/...
Du musst angemeldet sein, um einen Kommentar abzugeben.
Nicht noch ängstlich sind.
CSS3 hat einige nette features, siehe zum Beispiel http://www.quirksmode.org/css/multicolumn.html aber Internet Explorer nicht unterstützt und ich weiß nicht, wie die Unterstützung im IE9 (nach Microsoft nicht existent in der beta im moment)
Können Sie CSS3-Multicolumn Layouts, und seine polyfill: https://github.com/gryzzly/CSS-Multi-column-Layout-Module-Polyfill
Ich brauchte es heute und schrieb das python-äquivalent. Sie können schreiben, mit nativem javascript.
https://github.com/berkantaydin/vertical-alphabetical-sorting-with-columns
Wenn Sie es tun, in
PHP
Sie können mit einem einfachen Zähler und%
. Ich habe es geschafft, dies zu erreichen inWordPress
abrufen einer Liste von benutzerdefinierten Taxonomien etwa so:Können Sie auch eine Schleife durch ein array und erreichen die gleiche Sache. Ausgabe in etwa so aussieht: