Sort html ul / li list in alphabetical vertical block

Question

Here is a problem that I run into from time to time, which I usually try to solve from a backward point, but would like to know if there is any magic solution that others have decided to solve at the front end.

Given the list of ul / li presented in the markup in alphabetical order from az:

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

As a rule, it is very easy to float elements on the left and sort them visually horizontally in blocks, for example:

However, to get the columns, for example:

I always had to break HTML into separate objects, for example four separate <ul> elements in the example above.

Is there a way to save everything in a single ul list without any extra markup, using only CSS (no JavaScript) to get a columnar view like the second image above? My guess is “no,” but I have already seen the magic, and I would like to answer this more definitively.

Answer 1

I'm not afraid yet.

There are some interesting features in CSS3, see for example http://www.quirksmode.org/css/multicolumn.html , but Internet Explorer does not support it, and I don’t know how support will be in IE9 (according to Microsoft , currently in beta)

Answer 2

You can use multi-line CSS3 and polyfill layouts: https://github.com/gryzzly/CSS-Multi-column-Layout-Module-Polyfill

Answer 3

I need it today and wrote this python equivalent. You can write using the built-in javascript.

 # -*- coding: utf8 -*- import math # --------------------- EDIT THIS PART #define columns c = 4 # you can define to alphabetical list here # i used to numbers, because range func. very effective for testing list = range(1, 26, 1) # ---------------------- END OF EDIT # firstly sort list = sorted(list) # calculate total row r = int(math.ceil(len(list) / c)) + (1 if len(list) % c is not 0 else 0) index = 0 table1 = [] for x in range(c): table1.append([]) for y in range(r): if len(list) > index: table1[x].append(y) table1[x][y] = list[index] index += 1 res = '' for i in range(r): for x in table1: try: #print x[i] res += "%s\t|\t" % x[i] except IndexError: res += "%s\t|\t" % "_" pass res += "\n" #print table1 print res 

https://github.com/berkantaydin/vertical-alphabetical-sorting-with-columns

Answer 4

If you do this in PHP , you can use a simple counter and % . I managed to do this in WordPress , getting a list of custom taxonomies:

 <div class="row gutters"> <?php $taxos = get_categories ( array( 'taxonomy' => 'make' ) ); ?> <?php $count = 0; ?> <div class="col col_2"> <ul> <?php foreach( $taxos as $tax ) : ?> <li><a href="/make/<?php echo $tax->slug; ?>"><?php echo $tax->name; ?></a></li> <?php $count++; ?> <?php if( $count % 5 == 0 ) echo '</div></ul><div class="col col_2"><ul>'; ?> <?php endforeach; ?> </ul> </div> </div> 

You can also iterate over the array and get the same. The result looks something like this:

 af bg ch di ej