Existe-t-il un moyen de diviser une liste en colonnes ?

Question

Ma page web contient 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 m'y prendre 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, de sorte que si la liste passe à 200 éléments, je ne doive pas procéder à de nombreux ajustements manuels pour l'adapter à la nouvelle liste.

Answer 1

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

La prise en charge du navigateur est exactement ce à quoi on s'attend

Il fonctionne "partout", sauf avec Internet Explorer 9 ou une version plus ancienne : 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 la prise en charge d'IE est nécessaire, vous devrez utiliser JavaScript, par exemple :

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

Une autre solution consiste à revenir à la situation normale float: left para uniquement IE . L'ordre sera erroné, mais au moins il sera similaire :

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

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

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

Answer 2

Nous sommes en 2023 : restez simples, utilisez les feuilles de style CSS grid o column-count

Beaucoup de ces réponses sont dépassées, nous sommes en 2022 et nous ne devrions pas permettre aux gens qui utilisent encore IE9. Il est bien plus simple d'utiliser Grille CSS o column-count .

Le code est très simple et vous pouvez facilement ajuster le nombre de colonnes à l'aide de la fonction grid-template-columns o column-count .

grid solution :

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

column-count solution qui maintient l'ordre :

.column-list {
  column-count: 4;
}

<ul class="column-list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
  <li>item 8</li>
  <li>item 9</li>
  <li>item 10</li>
  <li>item 11</li>
  <li>item 12</li>
</ul>

Answer 3

Si vous souhaitez un nombre prédéfini de colonnes, vous pouvez utiliser column-count et column-gap, comme indiqué ci-dessus.

Toutefois, si vous souhaitez une colonne unique d'une hauteur limitée qui se décomposerait en plusieurs colonnes si nécessaire, vous pouvez y parvenir très simplement en modifiant l'affichage en "flex".

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

<style>
  ul {
    display: flex;
    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>

Answer 4

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

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

Au lieu de colonnes bien ordonnées, comme :

item 1 | item 4
item 2 | 
item 3 | 

Le code à utiliser serait le suivant :

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

Vous pourriez ajouter une bordure inférieure à l'élément li afin de rendre plus évident le flux des éléments de gauche à droite.

Answer 5

Cette réponse n'est pas nécessairement échelle mais ne nécessite que des ajustements mineurs au fur et à mesure que la liste s'allonge. D'un point de vue sémantique, cela peut sembler un peu contre-intuitif puisqu'il s'agit de deux mais à part cela, il s'affichera comme vous le souhaitez dans n'importe quel navigateur.

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>