Est-il possible de diviser une liste en colonnes?

Ma page Web comporte 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 dans deux ou même quatre colonnes sur la page. Comment dois-je faire cela avec CSS?

 Item
 Item
 Item
 Item
 Item
 Item
 Item
 Item
 Item
 Item

Je préfère que la solution soit flexible, de sorte que si la liste s’élève à 200 éléments, je n’ai pas besoin de faire beaucoup d’ajustements manuels pour tenir compte de la nouvelle liste.

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

Le support du navigateur est exactement ce que 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 requirejs, vous devrez utiliser JavaScript, par exemple:

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

Une autre solution consiste à utiliser le float: left normal float: left pour seulement IE . La commande sera fausse, mais au moins elle sera similaire:

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

Vous pouvez appliquer ce repli à 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 entraînera 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 à faire serait:

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

Vous pouvez append une bordure inférieure aux li pour rendre plus visible le stream des éléments de gauche à droite.

Si vous souhaitez un nombre prédéfini de colonnes, vous pouvez utiliser le nombre de colonnes et l’écart de colonnes, comme indiqué ci-dessus.

Cependant, si vous souhaitez une seule colonne avec une hauteur limitée qui se décomposerait en plusieurs colonnes si nécessaire, vous pouvez le faire simplement en changeant l’affichage en flexion.

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

   Item
 Item
 Item
 Item
 Item
 Item
 Item
 Item
 Item
 Item

J’ai constaté que (actuellement) Chrome ( Version 52.0.2743.116 m ) comporte des tonnes de problèmes et de problèmes avec le nombre de column-count css concernant les éléments de débordement et les éléments de positionnement 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 réparé, alors j’ai essayé de résoudre ce problème par le biais de javascript simple, et j’ai créé une bibliothèque qui le fait – https://github.com/yairEO/listBreaker

Page de démonstration

Cette réponse n’est pas nécessairement mise à l’ échelle, mais ne nécessite que des ajustements mineurs au fur et à mesure que la liste augmente. Sémantiquement, cela peut sembler un peu contre-intuitif, car il y a deux listes, mais à part cela, cela ressemblera à ce que vous voulez dans n’importe quel navigateur.

 ul { float: left; } ul > li { width: 6em; }

   Item 1
 Item 2
 Item 3
 
   Item 4
 Item 5
 Item 6

Si vous pouvez le supporter, CSS Grid est probablement le moyen le plus propre de créer une liste à une dimension en une disposition en 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; }