Ma page Web a une liste «maigre»: par exemple, une liste de 100 éléments d'un mot chacun. Pour réduire le défilement, je souhaite présenter cette liste en deux voire quatre colonnes sur la page. Comment dois-je faire cela avec 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>

Je préfère que la solution soit flexible pour que si la liste passe à 200 éléments, je n'ai pas à faire beaucoup d'ajustements manuels pour accueillir la nouvelle liste.

La solution CSS est: http://www.w3.org/TR/css3-multicol/

Le support du navigateur est exactement ce à quoi vous vous attendez.

Il fonctionne "partout" sauf Internet Explorer 9 ou plus ancien: 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;
}

Voir: http://jsfiddle.net/pdExf/

Si le support IE est requis, vous devrez utiliser JavaScript, par exemple:

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

Une autre solution consiste à revenir à la normale float: leftpour IE uniquement . L'ordre sera erroné, mais au moins il aura l'air similaire:

Voir: http://jsfiddle.net/NJ4Hw/

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

Vous pouvez appliquer cette solution de secours avec Modernizr si vous l'utilisez déjà.

Si vous recherchez une solution qui fonctionne également dans IE, vous pouvez faire flotter les éléments de la liste vers la gauche. Cependant, cela se traduira par une liste qui serpente, comme ceci:

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

Au lieu de colonnes soignées, comme:

item 1 | item 4
item 2 | 
item 3 | 

Le code pour faire cela serait:

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

Vous pouvez ajouter une bordure en bas au lis pour rendre le flux des éléments de gauche à droite plus apparent.

Si vous voulez un nombre prédéfini de colonnes, vous pouvez utiliser le nombre de colonnes et l'écart de colonnes, comme mentionné ci-dessus.

Cependant, si vous voulez une seule colonne avec une hauteur limitée qui se diviserait en plusieurs colonnes si nécessaire, cela peut être réalisé tout simplement en changeant l'affichage en flex.

Cela ne fonctionnera pas sur IE9 et certains autres anciens navigateurs. Vous pouvez vérifier le support sur Puis-je utiliser

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

Cette réponse n'est pas nécessairement mise à l' échelle, mais ne nécessite que des ajustements mineurs à mesure que la liste s'allonge. Sémantiquement, cela peut sembler un peu contre-intuitif car il s'agit de deux listes, mais à part cela, cela ressemblera à ce que vous voulez dans n'importe quel navigateur jamais créé.

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 - Restez simple, utilisez CSS Grid

Beaucoup de ces réponses sont dépassées, nous sommes en 2020 et nous ne devrions pas permettre aux personnes qui utilisent encore IE9. Il est beaucoup plus simple d'utiliser simplement la grille CSS .

Le code est très simple et vous pouvez facilement ajuster le nombre de colonnes à l'aide du grid-template-columns. Voyez cela , puis jouez avec ce violon pour répondre à vos besoins.

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

J'ai trouvé que (actuellement) Chrome ( Version 52.0.2743.116 m) a des tonnes de bizarreries et de problèmes avec le CSS column-countconcernant les éléments de débordement et les éléments positionnés absolus à l'intérieur des éléments, en particulier avec certaines transitions de dimensions.

c'est un désordre total et ne peut pas être corrigé, alors j'ai essayé de résoudre ce problème via un simple javascript et j'ai créé une bibliothèque qui le fait - https://github.com/yairEO/listBreaker

Page de démonstration

Si vous pouvez le supporter, CSS Grid est probablement le moyen le plus propre de créer une liste unidimensionnelle dans une disposition à deux colonnes avec des intérieurs réactifs.

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>

Ce sont les deux lignes clés qui vous donneront votre disposition à 2 colonnes

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

La méthode mobile-first consiste à utiliser les colonnes CSS pour créer une expérience pour les écrans plus petits, puis à utiliser les requêtes multimédias pour augmenter le nombre de colonnes à chacun des points d'arrêt définis par votre mise en page.

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>

Voici ce que j'ai fait

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>