Comment afficher une liste non ordonnée dans deux colonnes?

Avec le code HTML suivant, quelle est la méthode la plus simple pour afficher la liste sous la forme de deux colonnes?

  • A
  • B
  • C
  • D
  • E

Affichage souhaité:

 AB CD E 

La solution doit pouvoir fonctionner sur Internet Explorer.

Navigateurs modernes

tirez parti du module de colonnes css3 pour prendre en charge ce que vous recherchez.

http://www.w3schools.com/cssref/css3_pr_columns.asp

CSS:

 ul { columns: 2; -webkit-columns: 2; -moz-columns: 2; } 

http://jsfiddle.net/HP85j/8/

Navigateurs hérités

Malheureusement pour le support d’IE, vous aurez besoin d’une solution de code qui implique la manipulation de JavaScript et de dom. Cela signifie que chaque fois que le contenu de la liste change, vous devrez effectuer l’opération pour réorganiser la liste en colonnes et la réimprimer. La solution ci-dessous utilise jQuery pour des raisons de brièveté.

http://jsfiddle.net/HP85j/19/

HTML:

 
  • A
  • B
  • C
  • D
  • E
  • F
  • G

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

MODIFIER:

Comme indiqué ci-dessous, les colonnes seront classées comme suit:

 AE BF CG D 

tandis que l'OP demandait une variante correspondant à ce qui suit:

 AB CD EF G 

Pour accomplir la variante, il vous suffit de changer 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 regardais la solution de @ jaider qui fonctionnait bien, mais je propose une approche légèrement différente qui, selon moi, est plus facile à utiliser et que j’ai vue bonne dans 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, une liste non ordonnée affiche la position de la puce à l’extérieur, mais dans certains navigateurs, cela entraînerait des problèmes d’affichage en fonction de la manière dont le navigateur dispose votre site Web.

Pour le faire afficher dans le format:

 AB CD E 

etc. utilisez ce qui suit:

 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 des colonnes. Tout le meilleur et merci @jaider car votre réponse m’a aidé à découvrir cela.

J’ai essayé de poster ceci en tant que commentaire, mais je n’ai pas pu afficher correctement les colonnes (selon votre question).

Vous demandez:

UN B

CD

E

… mais la réponse acceptée comme solution reviendra:

UN D

ÊTRE

C

… soit la réponse est incorrecte, soit la question est.

Une solution très simple serait de définir la largeur de votre

    , puis de flotter et de définir la largeur de vos éléments

  • comme

     
    • A
    • B
    • C
    • D
    • E
    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 erronée, les réponses précédentes s’appliquent (avec un correctif JS pour l’absence de prise en charge d’IE).

    J’aime la solution pour les navigateurs modernes, mais les puces manquent, 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: "• "; } 

    entrer la description de l'image ici

    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%; } 
     
    • first
    • second
    • third
    • fourth

    Ceci peut être réalisé en utilisant la propriété css de count de colonne sur le div parent,

    comme

      column-count:2; 

    vérifier cela pour plus de détails.

    Comment faire apparaître la liste DIV flottante dans les colonnes, pas les lignes

    C’est le moyen le plus simple de le faire. CSS uniquement

    1. append de la largeur à l’élément ul.
    2. add display: inline-block et largeur de la nouvelle colonne (doit être inférieure à la moitié de la largeur ul).
     ul.list { width: 300px; } ul.list li{ display:inline-block; width: 100px; } 
     
    • A
    • B
    • C
    • D
    • E

    Vous pouvez le faire très facilement avec le plugin jQuery-Columns, par exemple pour diviser une ul avec une classe de .mylist que vous feriez

     $('.mylist').cols(2); 

    Voici un exemple en direct sur jsfiddle

    Cela me plaît mieux qu’avec CSS car avec la solution CSS, tout ne s’aligne pas verticalement.

    plus une réponse après quelques années!

    dans cet article: http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/

    HTML:

     
    • CSS
    • XHTML
    • Semantics
    • Accessibility
    • Usability
    • Web Standards
    • PHP
    • Typography
    • Grids
    • CSS3
    • HTML5
    • UI

    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%;} #sortingple li { width:33.333%; } #quad li { width:25%; } #six li { width:16.666%; } 

    Dans updateColumns() faut if (column >= columns.length) plutôt que if (column > columns.length) pour lister tous les éléments (C est ignoré par exemple) pour que:

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

    http://jsfiddle.net/e2vH9/1/

    La solution héritée de la réponse supérieure ne fonctionnait pas pour moi car je souhaitais affecter plusieurs listes sur la page et la réponse suppose une liste unique, en plus d’utiliser une bonne partie de l’état global. Dans ce cas, je voulais modifier chaque liste dans une

    :

     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("
      "); } let lists = section.find("ul"); for (let i = 0; i < items.length; i++) { lists.get(i % columns).append(items[i]); } });

    Avec Bootstrap … Cette réponse ( https://stackoverflow.com/a/23005046/1128742 ) m’a orienté vers cette solution:

     
    • Item 1
    • Item 2
    • Item 3

    http://jsfiddle.net/pasortingckbad767/472r0ynf/

    Cela a été une solution parfaite pour moi, en regardant pendant des années:

    http://css-sortingcks.com/forums/topic/two-column-unordered-list/