Como tenemos quince ítems vamos a hacer que se agrupen de cinco en cinco, esto es en tres columnas. Para ello le adjudicaremos a la lista una anchura de 14em para cada ítem, con un total de 42em para la lista. (Este cálculo es empírico: en función de la longitud de los ítems estimamos la anchura necesaria y la corregimos si nos hemos desviado mucho). Si fijamos los márgenes y rellenos de los elementos de la lista a 0 nos vendrá muy bien para poder ajustar la estimación de anchuras.

Aunque parezca un detalle nimio es importante que se especifique el ancho en ambos selectores para que el navegador pueda calcular cuántos ítems le cabrán en cada línea.

El tercer factor a tener en cuenta es que los ítems floten a la izquierda, de forma que vayan dejando hueco a su derecha para que se pueda colocar el ítem siguiente.

Recuperar los indicadores de ítem

Ya hemos comentado antes que Internet Explorer y Opera no mostraban los indicadores de item cuando la lista tenía establecida una anchura. Esto incluye no sólo los indicadores por defecto, sino también las imágenes gráficas. Es posible que hayas pensado que lo que habíamos hecho era sustituir los indicadores por imágenes, pero no es así: ha habido que complicar un poco la situación buscando una imagen para ponerla como fondo de cada ítem y calcular los desplazamientos para que no se montara con el texto.

La explicación en real de esto se basa en que, cada elemento de lista hace que el navegador genere dos cajas: una para el indicador y otra par el texto del ítem. Internet Explorer y Opera solo generan la caja correspondiente al texto cuando se encuentran una lista con anchura especificada.  Debido a esto, para obtener un efecto similar al que se muestra habría que trabajar adjudicando una imagen de fondo y separándola del texto para que no este no se superpusiera. Además no habría que olvidarse de quitar los indicadores para que no aparecieran en los navegadores basados en el motor Gecko de Mozilla que interpretan correctamente la situación. Como ves todo bastante complicado. En el siguiente recuadro

En este caso los ítems de la lista no pueden flotar, porque eso provocaría una ordenación horizontal como ya hemos visto. 

Sin embargo necesitamos que se coloquen en columnas. Para ello crearemos tantas clases como columnas necesitemos y especificaremos en ellas el margen izquierdo de forma que al aplicárselas a cada ítem hagamos que estos se sitúen escalonadamente. 

También vamos a adjudicarle una altura a la línea. Enseguida veremos para qué nos sirve.

En estos momentos nuestro código presentaría el siguiente estado:

Y con eso conseguiríamos... este pequeño desastre

Es verdad que el texto parece encolumnado, pero lo que habíamos dicho antes de que queríamos que las columnas se situaran escalonadamente ha resultado profético. 

Ahora bien, si lo pensamos un poco ha ocurrido lo que era de esperar: el item 6 se ha colocado donde podía esperar, esto es, debajo del ítem 5 pero respetando el margen que le hemos indicado. El 7, 8, 9 y 10 se han ido colocando cada uno debajo del anterior con su margen correctamente calculado. Del 11 al 16 se ha producido el mismo proceso acorde a lo que habíamos indicado hasta ahora.

Está claro que nos falta introducir una pequeña corrección y aquí es donde aparece la utilidad de esa altura de línea que habíamos indicado como propiedad de los selectores li. Como cada item ha ido ocupando 1.3 em quiere decir que cada columna ha consumido 1.3 x 5 = 6.5 em verticales. Si creamos una clase que tenga un margen superior negativo de esa cantidad y la aplicamos a los ítems en los que se produce el salto de columna conseguiremos que suban hasta situarse a la altura del primer ítem. Los que vayan a continuación se irán alineando correctamente bajo él hasta que llegue el siguiente salto de columna. Esto se traduciría en la siguiente clase que añadimos a nuestros estilos: