La mia pagina web ha un elenco "scarno": ad esempio, un elenco di 100 elementi di una parola ciascuno. Per ridurre lo scorrimento, voglio presentare questo elenco in due o anche quattro colonne nella pagina. Come dovrei farlo con i 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>

Preferisco che la soluzione sia flessibile in modo che se l'elenco cresce fino a 200 elementi, non devo fare molte regolazioni manuali per accogliere il nuovo elenco.

La soluzione CSS è: http://www.w3.org/TR/css3-multicol/

Il supporto del browser è esattamente quello che ti aspetteresti ..

Funziona "ovunque" tranne Internet Explorer 9 o versioni precedenti: 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;
}

Vedi: http://jsfiddle.net/pdExf/

Se è richiesto il supporto di IE, dovrai utilizzare JavaScript, ad esempio:

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

Un'altra soluzione è tornare alla normalità solofloat: left per IE . L'ordine sarà sbagliato, ma almeno sembrerà simile:

Vedi: http://jsfiddle.net/NJ4Hw/

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

Puoi applicare quel fallback con Modernizr se lo stai già utilizzando.

Se stai cercando una soluzione che funzioni anche in IE, puoi spostare gli elementi dell'elenco a sinistra. Tuttavia, questo si tradurrà in un elenco che serpeggia, come questo:

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

Invece di colonne ordinate, come:

item 1 | item 4
item 2 | 
item 3 | 

Il codice per farlo sarebbe:

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

È possibile aggiungere un bordo inferiore alla lis per rendere più evidente il flusso degli elementi da sinistra a destra.

Se desideri un numero predefinito di colonne, puoi utilizzare il conteggio delle colonne e lo spazio tra le colonne, come menzionato sopra.

Tuttavia, se si desidera una singola colonna con un'altezza limitata che si spezzerebbe in più colonne se necessario, è possibile ottenerla semplicemente modificando la visualizzazione in flex.

Questo non funzionerà su IE9 e altri vecchi browser. Puoi controllare il supporto su Posso usare

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

Questa risposta non è necessariamente scalabile, ma richiede solo piccoli aggiustamenti man mano che l'elenco cresce. Semanticamente potrebbe sembrare un po 'controintuitivo dato che si tratta di due elenchi, ma a parte questo avrà l'aspetto che desideri in qualsiasi browser mai realizzato.

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 - mantienilo semplice, usa CSS Grid

Molte di queste risposte sono obsolete, è il 2020 e non dovremmo consentire alle persone che stanno ancora utilizzando IE9. È molto più semplice usare solo la griglia CSS .

Il codice è molto semplice e puoi facilmente regolare quante colonne ci sono usando il grid-template-columns. Guarda questo e poi gioca con questo violino per soddisfare le tue esigenze.

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

Ho scoperto che (attualmente) Chrome ( Version 52.0.2743.116 m) ha tonnellate di stranezze e problemi con CSS per column-countquanto riguarda gli elementi in overflow e gli elementi posizionati in modo assoluto all'interno degli elementi, specialmente con alcune transizioni di dimensioni ..

è un disastro totale e non può essere risolto, quindi ho provato ad affrontarlo tramite un semplice javascript e avevo creato una libreria che lo fa: https://github.com/yairEO/listBreaker

Pagina demo

Se puoi supportarlo, CSS Grid è probabilmente il modo più pulito per creare un elenco unidimensionale in un layout a due colonne con interni reattivi.

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>

Queste sono le due linee chiave che ti daranno il layout a 2 colonne

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

Il primo metodo per dispositivi mobili consiste nell'utilizzare le colonne CSS per creare un'esperienza per schermi più piccoli, quindi utilizzare le query multimediali per aumentare il numero di colonne in ciascuno dei punti di interruzione definiti del 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>

Ecco cosa ho fatto

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>