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

Estaba mirando la solución de @jaider que funcionó, pero estoy ofreciendo un enfoque ligeramente diferente que creo que es más fácil de trabajar con y que he visto que es bueno a través de 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 no ordenada muestra la posición de la viñeta fuera, pero luego en algunos navegadores causaría algunos problemas de visualización basados en la forma en que el navegador presenta su sitio web.

Para que se muestre en el formato:

A B
C D
E

Etc. utilice el 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 como su respuesta ayudó a guiarme para descubrir esto.

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

Usted está pidiendo:

A B

C D

E

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

A D

B E

C

... por lo tanto la respuesta es incorrecta o la pregunta.

Una solución muy simple sería establecer el ancho de su <ul> y luego flotar y establecer el ancho de sus <li> elementos como so

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ul>

ul{
    width:210px;
}
li{
    background:green;
    float:left;
    height:100px;
    margin:0 10px 10px 0;
    width:100px;
}
li:nth-child(even){
    margin-right:0;
}

Ejemplo aquí http://jsfiddle.net/Jayx/Qbz9S/1/

Si su pregunta es incorrecta, entonces las respuestas anteriores se aplican (con una solución de JS para carecer de soporte de IE).

Me gusta la solución para los navegadores modernos, pero faltan las viñetas, así que le añado un pequeño truco:

Http://jsfiddle.net/HP85j/419 /

ul {
    list-style-type: none;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}


li:before {
  content: "• ";
}

Aquí hay una posible solución:

Fragmento:

ul {
  width: 760px;
  margin-bottom: 20px;
  overflow: hidden;
  border-top: 1px solid #ccc;
}
li {
  line-height: 1.5em;
  border-bottom: 1px solid #ccc;
  float: left;
  display: inline;
}
#double li {
  width: 50%;
}

<ul id="double">
  <li>first</li>
  <li>second</li>
  <li>third</li>
  <li>fourth</li>
</ul>

Y está hecho.
Para 3 columnas use li ancho como 33%, para 4 columnas use 25% y así sucesivamente.

Esto se puede lograr usando la propiedad css column-count en el div padre,

Como

 column-count:2;

Mira esto para más detalles.

Cómo hacer que la lista DIV flotante aparezca en columnas, no en filas

Esta es la forma más sencilla de hacerlo. Solo CSS.

1. añada width al elemento ul.
2. agregar pantalla:bloque en línea y ancho de la nueva columna (debe ser inferior a la mitad del ancho ul).

ul.list {
  width: 300px;  
}

ul.list li{
  display:inline-block;
  width: 100px;
}

<ul class="list">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ul>

Puede hacer esto muy fácilmente con el complemento jQuery-Columns por ejemplo para dividir una ul con una clase de .mylist you would do

$('.mylist').cols(2);

Aquí hay un ejemplo en vivo en jsfiddle

Esto me gusta más que con CSS porque con la solución CSS no todo se alinea verticalmente a la parte superior.

Más una respuesta después de unos años!

En este artículo: http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/

HTML:

<ul id="double"> <!-- Alter ID accordingly -->
  <li>CSS</li>
  <li>XHTML</li>
  <li>Semantics</li>
  <li>Accessibility</li>
  <li>Usability</li>
  <li>Web Standards</li>
  <li>PHP</li>
  <li>Typography</li>
  <li>Grids</li>
  <li>CSS3</li>
  <li>HTML5</li>
  <li>UI</li>
</ul>

CSS:

ul{
  width:760px;
  margin-bottom:20px;
  overflow:hidden;
  border-top:1px solid #ccc;
}
li{
  line-height:1.5em;
  border-bottom:1px solid #ccc;
  float:left;
  display:inline;
}
#double li  { width:50%;}
#triple li  { width:33.333%; }
#quad li    { width:25%; }
#six li     { width:16.666%; }

En updateColumns() necesita if (column >= columns.length) en lugar de if (column > columns.length) para enumerar todos los elementos (C se omite, por ejemplo) así:

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

Http://jsfiddle.net/e2vH9/1 /

La solución heredada en la respuesta superior no funcionó para mí porque quería afectar varias listas en la página y la respuesta asume una sola lista además de que utiliza un poco de estado global. En este caso, quería alterar cada lista dentro de un <section class="list-content">:

const columns = 2;
$("section.list-content").each(function (index, element) {
    let section = $(element);
    let items = section.find("ul li").detach();
    section.find("ul").detach();
    for (let i = 0; i < columns; i++) {
        section.append("<ul></ul>");
    }
    let lists = section.find("ul");
    for (let i = 0; i < items.length; i++) {
        lists.get(i % columns).append(items[i]);
    }
});

Con Bootstrap... Esta respuesta ( https://stackoverflow.com/a/23005046/1128742 ) me apuntó hacia esta solución:

<ul class="list-unstyled row">
   <li class="col-xs-6">Item 1</li>
   <li class="col-xs-6">Item 2</li>
   <li class="col-xs-6">Item 3</li>
</ul>

Http://jsfiddle.net/patrickbad767/472r0ynf /

Esta fue una solución perfecta para mí, buscándola durante años:

Http://css-tricks.com/forums/topic/two-column-unordered-list /