Minha página da web tem uma lista 'skinny': por exemplo, uma lista de 100 itens de uma palavra cada. Para reduzir a rolagem, quero apresentar essa lista em duas ou até quatro colunas na página. Como devo fazer isso com 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>

Prefiro que a solução seja flexível, de modo que, se a lista aumentar para 200 itens, não precise fazer muitos ajustes manuais para acomodar a nova lista.

A solução CSS é: http://www.w3.org/TR/css3-multicol/

O suporte do navegador é exatamente o que você esperaria.

Funciona "em qualquer lugar", exceto no Internet Explorer 9 ou 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;
}

Veja: http://jsfiddle.net/pdExf/

Se o suporte do IE for necessário, você terá que usar JavaScript, por exemplo:

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

Outra solução é voltar ao normal apenasfloat: left para o IE . O pedido estará errado, mas pelo menos será semelhante:

Veja: http://jsfiddle.net/NJ4Hw/

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

Você pode aplicar esse fallback com o Modernizr se já estiver usando.

Se você está procurando uma solução que funcione no IE também, você pode flutuar os elementos da lista para a esquerda. No entanto, isso resultará em uma lista que serpenteia, como esta:

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

Em vez de colunas organizadas, como:

item 1 | item 4
item 2 | 
item 3 | 

O código para fazer isso seria:

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

Você pode adicionar uma borda inferior ao lis para tornar o fluxo dos itens da esquerda para a direita mais aparente.

Se quiser um número predefinido de colunas, você pode usar contagem de colunas e lacuna de colunas, conforme mencionado acima.

No entanto, se você quiser uma única coluna com altura limitada que se quebraria em mais colunas se necessário, isso pode ser feito simplesmente mudando a exibição para flex.

Isso não funcionará no IE9 e alguns outros navegadores antigos. Você pode verificar o suporte em Posso 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>

Essa resposta não é necessariamente escalável, mas requer apenas pequenos ajustes conforme a lista cresce. Semanticamente, pode parecer um pouco contra-intuitivo, já que são duas listas, mas, fora isso, terá a aparência que você deseja em qualquer navegador já criado.

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 - mantenha a simplicidade, use CSS Grid

Muitas dessas respostas estão desatualizadas, estamos em 2020 e não deveríamos permitir que pessoas que ainda usam o IE9. É muito mais simples usar a grade CSS .

O código é muito simples e você pode ajustar facilmente quantas colunas existem usando o grid-template-columns. Veja isso e brinque com este violino para atender às suas necessidades.

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

Descobri que (atualmente) Chrome ( Version 52.0.2743.116 m) tem toneladas de peculiaridades e problemas com css em column-countrelação a itens de overflow e elementos posicionados absolutos dentro de itens, especialmente com algumas transições de dimensões.

é uma bagunça total e não pode ser consertada, então tentei resolver isso por meio de javascript simples e criei uma biblioteca que faz isso - https://github.com/yairEO/listBreaker

Página de demonstração

Se você puder, CSS Grid é provavelmente a maneira mais limpa de fazer uma lista unidimensional em um layout de duas colunas com interiores responsivos.

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 são as duas linhas principais que lhe darão o layout de 2 colunas

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

A primeira maneira para dispositivos móveis é usar CSS Columns para criar uma experiência para telas menores e, em seguida, usar Media Queries para aumentar o número de colunas em cada um dos pontos de interrupção definidos do layout.

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>

Aqui está o que eu fiz

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>