Est-il un moyen de briser une liste en colonnes?

Ma page web a un "skinny" liste: par exemple, une liste de 100 articles d'un mot de longueur chacune. Pour réduire le défilement, je tiens à vous présenter cette liste à deux ou même quatre colonnes sur la page. Comment dois-je le faire avec du CSS?

HTML:

<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 la solution pour être flexible, de sorte que si la liste pousse à 200 articles, je n'ai pas à faire beaucoup de réglages manuels pour l'adapter à la nouvelle liste.

Il y a une bibliothèque qui fait que - github.com/yairEO/listBreaker
Je crois que la colonne CSS option de le faire. Cette option est facile à utiliser et les modifier s'il y a un besoin. Ici, vous l'avoir expliqué dans les détails -kolosek.com/css-columns

InformationsquelleAutor user776676 | 2011-06-28

225

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

La prise en charge du navigateur est exactement ce que vous attendez..

Il fonctionne, "partout", à l'exception d'Internet Explorer 9 ou plus: 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 IE soutien est nécessaire, vous devrez utiliser du JavaScript, par exemple:

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

Une autre solution consiste à revenir à la normale float: left pour seulement IE. La commande sera mauvais, mais au moins, ça ressemblera:

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

```
Vous pourriez appliquer que de secours avec Modernizr si vous l'utilisez déjà.
- Est-il un moyen pour supprimer la bordure du haut sur la première li dans chaque colonne?
- Cela fonctionne très bien pour un fixe de l'espace, mais devient un problème sensible dessins car les colonnes ne s'effondre pas comme lors de l'utilisation de display:inline ou inline-block.
- Fait intéressant: c'est à dire est le seul grand navigateur de bureau à soutenir pleinement cette fonction sans préfixes (depuis IE10)... Ah, l'ironie...
- Microsoft Edge est le seul navigateur (sur Windows) qui affichent des listes correctement, la rupture entre les éléments de la liste, pas dans le milieu d'un élément.
- Chrome est très buggy avec cette méthode lorsque les éléments de la liste sont plus que de simples textes. (multiline textes/ellipse/absolue élément positionné à l'intérieur..de nombreux scénarios). Firefox est superbe. comme toujours.
- Il peut être nécessaire pour le meilleur de la croix-prise en charge du navigateur pour inclure cette propriété supplémentaire list-style-position: inside; qui porte spécifiquement sur le problème signalé par @vsync je crois.
- veuillez consulter à ce sujet avec votre code jsfiddle.net/pdExf si la liste est dynamique, il peut causer des problèmes lorsque le nombre d'élément de la liste est 1.
- Je ne suis pas sûr de ce que tu veux dire. Pouvez-vous faire une démo montrant le problème? Vous avez juste lié mon code d'origine n'. Peut-être mettre en display: inline-block sur ul aide?
- merci beaucoup pour votre aimable réponse,veuillez visiter jsfiddle.net/pdExf/902 la liste ne contient qu'un élément, mais l'affichage que de plusieurs éléments .
- Essayez li { break-inside: avoid; }: jsfiddle.net/thirtydot/pdExf/903. Je ne suis pas trop familier avec les CSS colonnes, alors il pourrait y avoir une meilleure façon.
- parfait 🙂 je pense que vous devriez modifier votre réponse et de l'inclure, car il permettra d'améliorer la qualité de la réponse 🙂
InformationsquelleAutor thirtydot
18

Si vous êtes à la recherche d'une solution qui fonctionne dans IE ainsi, vous pouvez flotter les éléments de la liste à gauche. Cependant, ce résultat dans une liste que des serpents autour, comme ceci:
```
item 1 | item 2 | item 3
item 4 | item 5
```
Au lieu de neat colonnes, comme:
```
item 1 | item 4
item 2 | 
item 3 | 
```
Le code serait:
```
ul li {
  width:10em;
  float:left;
}
```
Vous pouvez ajouter une bordure à fond à la lis pour que le flux des éléments de gauche à droite, de plus en plus apparente.
- alors qu'il pourrait travailler pour un nombre déterminé d'éléments, le résultat ne sera pas assez pour juste 2 éléments.
InformationsquelleAutor Matt Hampel
7

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

Toutefois, si vous ne voulez qu'une seule colonne avec hauteur limitée qui se diviserait en plusieurs colonnes si nécessaire, cela peut être réalisé très simplement en changeant l'affichage de flex.

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

HTML:
```
<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>
```
- Très proche de ce que je vais faire après. Le seul inconvénient est que la largeur des colonnes ne s'adapte pas sur le contenu (essayer avec différentes longueur d'articles). Pas sûr de savoir comment est la largeur de la colonne définie. Peut-être le avec des le premier élément? En tout cas, tous les pointeurs sur la façon de surmonter cela?
InformationsquelleAutor Maciej Poleski
3

Cette réponse n'est pas nécessairement échelle mais exige seulement des ajustements mineurs comme la liste grandit. Du point de vue sémantique, il peut sembler un peu contre-intuitif car il est deux listes, mais à part que ça va ressembler à ce que vous voulez dans n'importe quel navigateur jamais fait.

CSS:
```
ul {
  float: left;
}

ul > li {
  width: 6em;
}
```
HTML:
```

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<ul>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>
```
InformationsquelleAutor Alan Hape
1

J'ai trouvé que (pour l'instant) Chrome (Version 52.0.2743.116 m) a des tonnes de bizarreries et les enjeux de la css column-count concernant le dépassement des éléments et des éléments en position absolue à l'intérieur des éléments, en particulier avec certaines dimensions de transitions..

c'est un désordre total, et ne peut pas être corrigé, j'ai donc tenté de s'attaquer à ce par le biais de javascript simple, et avait créé une bibliothèque qui fait que - https://github.com/yairEO/listBreaker

Page de démonstration
- Je préfère le jQuery colonnisseur plugin, à mon avis, il avait une meilleure fonctionnalité pour ce que je faisais (a été en mesure de trier par ordre alphabétique, descendant ou ascendant, colonnes comte, la largeur des colonnes & plus). jQuery Colonnisseur - WelcomeToTheInter.Net
- eh bien, la Colonnisseur code a plus d'options, puisque c'est près de 1 000 lignes de code, par rapport à la mienne qui est d'environ 120 lignes.. mais fait bien le travail
- oui mais mon problème, besoin de la liste de rester dans une liste, ce qui est le plus utile / nécessaire dépend du cas d'utilisation.
InformationsquelleAutor vsync

Si vous pouvez la soutenir Grille CSS est probablement la façon la plus propre pour faire un one-dimensional liste dans une disposition en deux colonnes avec sensible intérieurs.

CSS:

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

HTML:

<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 de clé qui vous donnera votre 2 mise en page en colonnes

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

InformationsquelleAutor mattLummus

Le mobile-première façon est d'utiliser des CSS Colonnes pour créer une expérience pour les petits écrans puis utilisation Les Media Queries à augmenter le nombre de colonnes à chaque de votre mise en page est défini de points d'arrêt.

CSS:

ul {
  column-count: 2;
  column-gap: 2rem;
}
@media screen and (min-width: 768px)) {
  ul {
    column-count: 3;
    column-gap: 5rem;
  }
}

HTML:

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

InformationsquelleAutor Josh Habdas

Vous devez vous connecter pour publier un commentaire.

Page de démonstration