Mi página web tiene una lista 'delgada': por ejemplo, una lista de 100 elementos de una palabra de longitud cada uno. Para reducir el desplazamiento, quiero presentar esta lista en dos o incluso cuatro columnas en la página. ¿Cómo debo hacer esto con CSS?

<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

Prefiero que la solución sea flexible para que si la lista crece a 200 elementos, no tenga que hacer muchos ajustes manuales para acomodar la nueva lista.

La solución CSS es: http://www.w3.org/TR/css3-multicol/

La compatibilidad del navegador es exactamente lo que esperarías.

Funciona "en todas partes" excepto Internet Explorer 9 o anterior: http://caniuse.com/multicolumn

ul {
    -moz-column-count: 4;
    -moz-column-gap: 20px;
    -webkit-column-count: 4;
    -webkit-column-gap: 20px;
    column-count: 4;
    column-gap: 20px;
}

Ver: http://jsfiddle.net/pdExf/

Si se requiere compatibilidad con IE, deberá utilizar JavaScript, por ejemplo:

http://welcome.totheinter.net/columnizer-jquery-plugin/

Otra solución es volver a la normalidad solofloat: left para IE . El orden será incorrecto, pero al menos se verá similar:

Ver: http://jsfiddle.net/NJ4Hw/

<!--[if lt IE 10]>
<style>
li {
    width: 25%;
    float: left
}
</style>
<![endif]-->

Puede aplicar ese respaldo con Modernizr si ya lo está usando.

Si está buscando una solución que también funcione en IE, puede hacer flotar los elementos de la lista a la izquierda. Sin embargo, esto dará como resultado una lista que serpentea, como esta:

item 1 | item 2 | item 3
item 4 | item 5

En lugar de columnas ordenadas, como:

item 1 | item 4
item 2 | 
item 3 | 

El código para hacer eso sería:

ul li {
  width:10em;
  float:left;
}

Puede agregar un borde inferior al li s para que el flujo de los elementos de izquierda a derecha sea más evidente.

Si desea un número preestablecido de columnas, puede usar el recuento de columnas y el espacio entre columnas, como se mencionó anteriormente.

Sin embargo, si desea una sola columna con una altura limitada que se dividiría en más columnas si fuera necesario, esto se puede lograr simplemente cambiando la pantalla a flex.

Esto no funcionará en IE9 y algunos otros navegadores antiguos. Puede consultar el soporte en ¿Puedo usar

<style>
  ul {
    display: -ms-flexbox;           /* IE 10 */
    display: -webkit-flex;          /* Safari 6.1+. iOS 7.1+ */
    display: flex;
    -webkit-flex-flow: wrap column; /* Safari 6.1+ */
    flex-flow: wrap column;
    max-height: 150px;              /* Limit height to whatever you need */
  }
</style>

<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

Esta respuesta no necesariamente escala, pero solo requiere ajustes menores a medida que crece la lista. Semánticamente, puede parecer un poco contraintuitivo, ya que son dos listas, pero aparte de eso, se verá como usted desea en cualquier navegador que se haya creado.

ul {
  float: left;
}

ul > li {
  width: 6em;
}

<!-- Column 1 -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<!-- Column 2 -->
<ul>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>

2020: hazlo simple, usa CSS Grid

Muchas de estas respuestas están desactualizadas, estamos en 2020 y no deberíamos habilitar a las personas que todavía usan IE9. Es mucho más simple usar la cuadrícula CSS .

El código es muy simple y puede ajustar fácilmente cuántas columnas hay usando grid-template-columns. Vea esto y luego juegue con este violín para satisfacer sus necesidades.

.grid-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

<ul class="grid-list">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

Descubrí que (actualmente) Chrome ( Version 52.0.2743.116 m) tiene toneladas de peculiaridades y problemas con CSS con column-countrespecto a los elementos de desbordamiento y los elementos de posición absoluta dentro de los elementos, especialmente con algunas transiciones de dimensiones.

es un desastre total y no se puede arreglar, así que intenté abordar esto a través de un simple javascript y había creado una biblioteca que hace eso: https://github.com/yairEO/listBreaker

Página de demostración

Si puede admitirlo, CSS Grid es probablemente la forma más limpia de hacer una lista unidimensional en un diseño de dos columnas con interiores receptivos.

ul {
  max-width: 400px;
  display: grid;
  grid-template-columns: 50% 50%;
  padding-left: 0;
  border: 1px solid blue;
}

li {
  list-style: inside;
  border: 1px dashed red;
  padding: 10px;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
<ul>

Estas son las dos líneas clave que le darán su diseño de 2 columnas

display: grid;
grid-template-columns: 50% 50%;

La forma móvil primero es usar columnas CSS para crear una experiencia para pantallas más pequeñas y luego usar consultas de medios para aumentar la cantidad de columnas en cada uno de los puntos de interrupción definidos de su diseño.

ul {
  column-count: 2;
  column-gap: 2rem;
}
@media screen and (min-width: 768px)) {
  ul {
    column-count: 3;
    column-gap: 5rem;
  }
}

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

Aquí esta lo que hice

ul {
      display: block;
      width: 100%;
}

ul li{
    display: block;
    min-width: calc(30% - 10px);
    float: left;
}

ul li:nth-child(2n + 1){
    clear: left;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>0</li>
</ul>