Comment afficher une liste non ordonnée sur deux colonnes?
Avec le code HTML suivant, quelle est la méthode la plus simple pour afficher la liste sur deux colonnes?
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
Affichage souhaité:
A B
C D
E
La solution doit pouvoir fonctionner sur Internet Explorer.
Navigateurs modernes
exploitez le module de colonnes CSS3 pour répondre à vos besoins.
http://www.w3schools.com/cssref/css3_pr_columns.asp
CSS:
ul {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
Navigateurs hérités
Malheureusement pour le support IE, vous aurez besoin d'une solution de code impliquant la manipulation de JavaScript et de dom. Cela signifie que chaque fois que le contenu de la liste est modifié, vous devez effectuer l'opération de réorganisation de la liste en colonnes et de réimpression. La solution ci-dessous utilise jQuery par souci de concision.
HTML:
<div>
<ul class="columns" data-columns="2">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
</ul>
</div>
JavaScript:
(function($){
var initialContainer = $('.columns'),
columnItems = $('.columns li'),
columns = null,
column = 1; // account for initial column
function updateColumns(){
column = 0;
columnItems.each(function(idx, el){
if (idx !== 0 && idx > (columnItems.length / columns.length) + (column * idx)){
column += 1;
}
$(columns.get(column)).append(el);
});
}
function setupColumns(){
columnItems.detach();
while (column++ < initialContainer.data('columns')){
initialContainer.clone().insertBefore(initialContainer);
column++;
}
columns = $('.columns');
}
$(function(){
setupColumns();
updateColumns();
});
})(jQuery);
CSS:
.columns{
float: left;
position: relative;
margin-right: 20px;
}
EDIT:
Comme indiqué ci-dessous, les colonnes seront classées comme suit:
A E
B F
C G
D
tandis que l'OP a demandé une variante correspondant aux éléments suivants:
A B
C D
E F
G
Pour accomplir la variante, vous modifiez simplement le code comme suit:
function updateColumns(){
column = 0;
columnItems.each(function(idx, el){
if (column > columns.length){
column = 0;
}
$(columns.get(column)).append(el);
column += 1;
});
}
Je cherchais la solution de @ jaider qui fonctionnait, mais je propose une approche légèrement différente, avec laquelle il est plus facile de travailler et que j’ai vue être bonne avec tous les navigateurs.
ul{
list-style-type: disc;
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
list-style-position: inside;//this is important addition
}
Par défaut, les listes non ordonnées affichent la position de la puce à l'extérieur, mais dans certains navigateurs, cela poserait des problèmes d'affichage en fonction de la manière dont le navigateur affiche le site Web.
Pour le faire afficher dans le format:
A B
C D
E
etc. utilisez les éléments suivants:
ul li{
float: left;
width: 50%;//helps to determine number of columns, for instance 33.3% displays 3 columns
}
ul{
list-style-type: disc;
}
Cela devrait résoudre tous vos problèmes d'affichage de colonnes. Tout le meilleur et merci @jaider pour votre réponse m'a aidé à découvrir cela.
J'ai essayé de poster ceci en tant que commentaire, mais je ne pouvais pas obtenir les colonnes à afficher correctement (selon votre question).
Vous demandez:
UN B
C D
E
... mais la réponse acceptée comme solution reviendra:
UN D
ÊTRE
C
... donc soit la réponse est incorrecte ou la question est.
Une solution très simple serait de définir la largeur de votre <ul>, puis de la laisser flotter et de définir la largeur de votre <li> comme
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
ul{
width:210px;
}
li{
background:green;
float:left;
height:100px;
margin:0 10px 10px 0;
width:100px;
}
li:nth-child(even){
margin-right:0;
}
Exemple ici http://jsfiddle.net/Jayx/Qbz9S/1/
Si votre question est fausse, les réponses précédentes s'appliquent (avec un correctif JS pour le manque de support IE).
J'aime la solution pour les navigateurs modernes, mais les puces sont manquantes, alors j'ajoute un petit truc:
http://jsfiddle.net/HP85j/419/
ul {
list-style-type: none;
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
li:before {
content: "• ";
}
Voici une solution possible:
Fragment:
ul {
width: 760px;
margin-bottom: 20px;
overflow: hidden;
border-top: 1px solid #ccc;
}
li {
line-height: 1.5em;
border-bottom: 1px solid #ccc;
float: left;
display: inline;
}
#double li {
width: 50%;
}<ul id="double">
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
</ul>Et c'est fait.
Pour 3 colonnes, utilisez li avec 33% de largeur, pour 4 colonnes, utilisez 25%, etc.
C'est le moyen le plus simple de le faire. CSS uniquement.
- ajouter de la largeur à l'élément ul.
- add display: inline-block et width de la nouvelle colonne (doit être inférieur à la moitié de la largeur de ul).
ul.list {
width: 300px;
}
ul.list li{
display:inline-block;
width: 100px;
}<ul class="list">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>Ceci peut être réalisé en utilisant la propriété css column-count sur div parent,
comme
column-count:2;
vérifier ceci pour plus de détails.
Comment faire pour que la liste DIV flottante apparaisse dans les colonnes, pas dans les lignes
Vous pouvez utiliser CSS uniquement pour définir deux colonnes ou plus
Un e
B
C
Ré
<ul class="columns">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
ul.columns {
-webkit-columns: 60px 2;
-moz-columns: 60px 2;
columns: 60px 2;
-moz-column-fill: auto;
column-fill: auto;
}
plus une réponse après quelques années!
dans cet article: http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/
HTML:
<ul id="double"> <!-- Alter ID accordingly -->
<li>CSS</li>
<li>XHTML</li>
<li>Semantics</li>
<li>Accessibility</li>
<li>Usability</li>
<li>Web Standards</li>
<li>PHP</li>
<li>Typography</li>
<li>Grids</li>
<li>CSS3</li>
<li>HTML5</li>
<li>UI</li>
</ul>
CSS:
ul{
width:760px;
margin-bottom:20px;
overflow:hidden;
border-top:1px solid #ccc;
}
li{
line-height:1.5em;
border-bottom:1px solid #ccc;
float:left;
display:inline;
}
#double li { width:50%;}
#triple li { width:33.333%; }
#quad li { width:25%; }
#six li { width:16.666%; }
Vous pouvez le faire très facilement avec le jQuery-Columns Plugin par exemple, pour scinder un ul avec une classe de .mylist, vous feriez
$('.mylist').cols(2);
Voici un exemple live sur jsfiddle
J'aime mieux cela qu'avec CSS car avec la solution CSS tout ne s'aligne pas verticalement vers le haut.
Dans updateColumns() besoin de if (column >= columns.length) plutôt que if (column > columns.length) pour lister tous les éléments (C est ignoré par exemple) ainsi:
function updateColumns(){
column = 0;
columnItems.each(function(idx, el){
if (column >= columns.length){
column = 0;
}
console.log(column, el, idx);
$(columns.get(column)).append(el);
column += 1;
});
}
La solution héritée de la réponse principale ne fonctionnait pas pour moi car je voulais affecter plusieurs listes sur la page et la réponse supposait une liste unique, plus une assez grande quantité d'état global. Dans ce cas, je voulais modifier chaque liste dans un <section class="list-content">:
const columns = 2;
$("section.list-content").each(function (index, element) {
let section = $(element);
let items = section.find("ul li").detach();
section.find("ul").detach();
for (let i = 0; i < columns; i++) {
section.append("<ul></ul>");
}
let lists = section.find("ul");
for (let i = 0; i < items.length; i++) {
lists.get(i % columns).append(items[i]);
}
});
With Bootstrap ... Cette réponse ( --- (https://stackoverflow.com/a/23005046/1128742 )) m'a permis de pointer vers cette solution:
<ul class="list-unstyled row">
<li class="col-xs-6">Item 1</li>
<li class="col-xs-6">Item 2</li>
<li class="col-xs-6">Item 3</li>
</ul>