Comment afficher une liste sur deux lignes?
J'ai une liste d'éléments que je veux insérer dans un espace contraint verticalement:
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ul>
Puisque je ne veux pas que la liste ait plus d'une hauteur spécifique, mais que je suis libre de l'étendre horizontalement, je veux la diviser en colonnes, comme ceci:
One Two Three
Four Five Six
Ou, alternativement (dans mon cas, l'ordre n'est pas important)
One Three Five
Two Four Six
La propriété css column-count permet de diviser une liste en colonnes, mais elle n'accepte qu'un nombre fixe de colonnes. Je ne connais pas le nombre d'éléments que je vais avoir (il peut aller de 1 à plus de 40), donc si je règle le nombre de colonnes à 3, toute liste de plus de 6 éléments sera trop élevée, et s'il n'y a que 4 éléments, seule la première colonne aura deux éléments et elle aura un aspect inégal.
Donc, idéalement, j'aurais besoin d'une propriété row-count, mais elle n'existe pas. J'imagine que je peux aussi le faire en Javascript, mais je recherche une solution uniquement en CSS.
J'ai essayé quelque chose: float:left sur chaque li met la liste dans une ligne. Pour le diviser en deux lignes, il me faudrait non appliquer float:left à l'élément N/2. Je ne sais pas comment faire ça.
Je sais aussi que je peux le faire en le divisant en plusieurs ul, chacun avec deux li et float:left entre eux, mais je voudrais éviter de gâcher le code HTML pour quelque chose de complètement présenté.
Est-ce que quelqu'un a une solution à ce problème?
Edit: Je pense que je n'ai pas été clair dans l'explication de mes besoins. Je veux que la liste soit triée dans les colonnes sans savoir combien d’éléments je vais avoir, et afin que j’aie toujours deux rangées.
Donc, par exemple avec 7 éléments, je veux avoir:
One Two Three Four
Five Six Seven
Et avec 3 articles:
One Two
Three
Voici un moyen simple de le faire en utilisant jQuery. Je sais qu'il est mentionné qu'une méthode CSS est nécessaire, mais ceci est juste pour référence future si quelqu'un veut se référer à cette question.
Obtenez le nombre d'éléments LI et divisez-le par le nombre de lignes et définissez cette valeur sur la propriété count-column.
Jquery
$(document).ready(function() {
var numitems = $("#myList li").length;
$("ul#myList").css("column-count",Math.round(numitems/2));
});
CSS
ul {
width: 900px;
}
li {
width: 75px;
height: 75px;
margin-top: 10px;
margin-right: 10px;
display: inline-block;
}
HTML
<ul id="myList">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
</ul>
MODIFIER:
Même implémentation en javascript simple.
var ul = document.getElementById("myList");
var li = ul.getElementsByTagName("li");
var numItems = li.length;
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = "ul { column-count: " + Math.round(numItems/2) + "; }";
document.body.appendChild(css);
Vous devez définir la largeur de UL, car le nombre de lignes dépendra de la largeur, même après la définition du nombre de colonnes. Vous pouvez également le définir sur 100%, mais le nombre de lignes changera en fonction de la taille de la fenêtre. Pour limiter le nombre de lignes à 2, une largeur fixe pour UL peut être requise.
Vous pouvez définir votre li à 33% de la largeur et flotter les uns contre les autres. Une fois qu’il n’ya plus assez de place dans une rangée, ils sont abaissés par rangées de 3 de largeur égale.
ul li{
width: 33%;
float: left;
}
Pourquoi ne pas lui donner un max-width?
ul {
max-width: somevalue; // which would last when the third item ends
}
Ou, vous pouvez leur ajouter une classe comme
<ul>
<li class="one">One</li>
<li class="one">Two</li>
<li class="one">Three</li>
<li class="two">Four</li>
<li class="two">Five</li>
<li class="two">Six</li>
</ul>
Maintenant CSS comme:
.one {
display: inline;
}
.two {
display: inline;
}
La dernière chose du rembourrage est aussi
ul li {
padding: somevalue;
}
Et pour trancher:
ul {
max-width: 200px; // to break the list
}
La bonne chance pour vous serait que vous puissiez d'abord vérifier la largeur de la liste! Puis coupez-le en deux parties égales à l'aide de JS, puis appliquez-le.
Si vous voulez obtenir le calculateur CSS, utilisez ceci:
width: calc(var1 + var2); // calc will do the math..
Voici le violon pour cette situation: http://jsfiddle.net/afzaal_ahmad_zeeshan/xN87Q/
Source: Création d'une liste non ordonnée à deux colonnes
Violon: Démo fournie dans le lien
HMTL
<ul class="two-col-special">
<li>First Category</li>
<li>Second Category</li>
<li>Third Category</li>
<li>Fourth Category</li>
<li>Fifth Category</li>
</ul>
CSS
.two-col-special {
border: 1px dotted blue;
overflow: auto;
margin: 0;
padding: 0;
}
.two-col-special li {
display: inline-block;
width: 45%;
margin: 0;
padding: 0;
vertical-align: top; /* In case multi-Word categories form two lines */
}
.two-col-special li:before {
content: '+';
padding: 5px;
margin-right: 5px; /* you can Tweak the gap */
color: orange;
background-color: white; /* in case you want a color... */
display: inline-block;
}
Voici un exemple utilisant display: flex et flex-direction: row pour changer l'ordre des colonnes en lignes:
#list-1 {
border: 3px solid red;
columns: 2;
column-gap: 5px;
width: 200px;
}
#list-2 {
border: 3px solid blue;
columns: 2;
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: auto; /* can change this */
width: 200px;
}
#list-2 li {
width: 100px;
height: auto;
}<ul id="list-1">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
</ul>
<ul id="list-2">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
</ul>