Saltar al contenido

¿Cómo mostrar una lista desordenada en dos columnas?

Siéntete libre de compartir nuestro espacio y códigos con tus amigos, necesitamos tu ayuda para ampliar nuestra comunidad.

Solución:

Navegadores modernos

Aproveche el módulo de columnas css3 para respaldar lo que está buscando.

http://www.w3schools.com/cssref/css3_pr_columns.asp

CSS:

ul 
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;

http://jsfiddle.net/HP85j/8/

Navegadores heredados

Desafortunadamente, para el soporte de IE, necesitará una solución de código que involucre JavaScript y manipulación de dom. Esto significa que cada vez que cambie el contenido de la lista, deberá realizar la operación para reordenar la lista en columnas y volver a imprimirla. La siguiente solución usa jQuery por brevedad.

http://jsfiddle.net/HP85j/19/

HTML:

  • A
  • B
  • C
  • D
  • E
  • F
  • G

JavaScript:

(function($)
    var initialContainer = $('.columns'),
        columnItems = $('.columns li'),
        columns = null,
        column = 1; // account for initial column
    function updateColumns()
        column = 0;
        columnItems.each(function(idx, el)
            if (idx !== 0 && idx > (columnItems.length / columns.length) + (column * idx))
                column += 1;
            
            $(columns.get(column)).append(el);
        );
    
    function setupColumns()
        columnItems.detach();
        while (column++ < initialContainer.data('columns'))
            initialContainer.clone().insertBefore(initialContainer);
            column++;
        
        columns = $('.columns');
    

    $(function()
        setupColumns();
        updateColumns();
    );
)(jQuery);

CSS:

.columns
    float: left;
    position: relative;
    margin-right: 20px;

EDITAR:

Como se indica a continuación, esto ordenará las columnas de la siguiente manera:

A  E
B  F
C  G
D

mientras que el OP solicitó una variante que coincida con lo siguiente:

A  B
C  D
E  F
G

Para lograr la variante, simplemente cambie el código a lo siguiente:

function updateColumns()
    column = 0;
    columnItems.each(function(idx, el)
        if (column > columns.length)
            column = 0;
        
        $(columns.get(column)).append(el);
        column += 1;
    );

Estaba viendo la solución de @jaider que funcionó, pero estoy ofreciendo un enfoque ligeramente diferente con el que creo que es más fácil trabajar y que he visto que es bueno en todos los navegadores.

ul
    list-style-type: disc;
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
    list-style-position: inside;//this is important addition

De forma predeterminada, la lista desordenada muestra la posición de la viñeta en el exterior, pero luego, en algunos navegadores, causaría algunos problemas de visualización según la forma en que el navegador presenta su sitio web.

Para que se muestre en el formato:

A B
C D
E

etc. use lo siguiente:

ul li
    float: left;
    width: 50%;//helps to determine number of columns, for instance 33.3% displays 3 columns

ul
    list-style-type: disc;

Esto debería resolver todos sus problemas con la visualización de columnas. Todo lo mejor y gracias @jaider ya que su respuesta ayudó a guiarme a descubrir esto.

Intenté publicar esto como un comentario, pero no pude hacer que las columnas se mostraran correctamente (según su pregunta).

Estás pidiendo:

AB

CD

mi

... pero la respuesta aceptada como solución volverá:

ANUNCIO

SER

C

... entonces la respuesta es incorrecta o la pregunta lo es.

Una solución muy simple sería establecer el ancho de su