web-dev-qa-db-fra.com

Est-il possible de diviser une liste en colonnes?

Ma page Web contient une liste "maigre": par exemple, une liste de 100 éléments de un mot chacun. Pour réduire le défilement, je souhaite présenter cette liste en deux voire même 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 de sorte que si la liste passe à 200 éléments, je n’ai pas à faire beaucoup d’ajustements manuels pour tenir compte de la nouvelle liste.

csscss3html-lists
103
user776676

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

Le support du navigateur correspond exactement à ce que vous attendez.

Cela 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 de IE est requis, vous devrez utiliser JavaScript, par exemple:

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

Une autre solution consiste à revenir à la valeur normale float: left pour uniquement IE. La commande sera fausse, mais au moins elle aura l’air similaire:

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

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

Vous pouvez appliquer ce repli avec Modernizr si vous l'utilisez déjà.

210
thirtydot

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 donnera une liste qui serpente, comme ceci:

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

Au lieu de belles colonnes, comme:

item 1 | item 4
item 2 | 
item 3 |

Le code à faire serait:

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

Vous pouvez ajouter une bordure inférieure à la lis pour rendre plus visible le flux des éléments de gauche à droite.

16
Matt Hampel

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

Toutefois, si vous souhaitez une colonne unique de hauteur limitée pouvant se diviser en plusieurs colonnes si nécessaire, vous pouvez le faire tout simplement en modifiant l’affichage en Flex.

Cela ne fonctionnera pas sur IE9 et certains autres anciens navigateurs. Vous pouvez consulter 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>

7
Maciej Poleski

Cette réponse ne nécessite pas nécessairement scale mais nécessite seulement des ajustements mineurs à mesure que la liste s'allonge. Sémantiquement, cela peut sembler un peu contre-intuitif puisqu'il s'agit de deux listes, mais à part cela, il aura l'apparence que vous 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>

3
Alan Hape

Si vous pouvez le supporter, CSS Grid est probablement le moyen le plus simple de transformer une liste unidimensionnelle en une présentation à 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 en 2 colonnes

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

J'ai trouvé que (actuellement) Chrome (Version 52.0.2743.116 m) présente des tas de bizarreries et de problèmes avec css column-count concernant les éléments à débordement et les éléments à positionnement absolu à 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 avec un simple javascript, et j'avais créé une bibliothèque qui le fait - https://github.com/yairEO/listBreaker

Page de démonstration

1
vsync

La méthode mobile d'abord consiste à utiliser CSS Columns pour créer une expérience pour les écrans plus petits puis utilisez Media Queries pour augmenter le nombre de colonnes à chacun des points d'arrêt définis par votre présentation.

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>

0
Josh Habdas