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

j'étais en train de regarder la solution de @jaider qui a fonctionné mais j'offre une approche légèrement différente qui je pense est plus facile à travailler et que j'ai vu pour être bon à travers 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 liste non-ordonnée afficher la position de la puce à l'extérieur, mais puis dans certains navigateurs, il serait causer des problèmes d'affichage basé sur la façon dont le navigateur de la disposition de votre site web.

pour l'afficher dans le format:

A B
C D
E

etc. utilisez le texte suivant:

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 avec l'affichage des colonnes. Tout le meilleur et merci @jaider car votre réponse a aidé à me guider pour découvrir cela.

j'ai essayé de poster ceci comme un commentaire, mais n'ai pas pu obtenir les colonnes pour afficher correctement (selon votre question).

vous demandez:

A B

C D

E

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

A D

B E

C

... si la réponse est incorrecte ou la question est de.

une solution très simple serait de régler la largeur de votre <ul> puis flotter et régler la largeur de votre <li> articles comme ainsi

<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, alors les réponses précédentes s'appliquent (avec un correctif JS pour manque de support IE).

j'aime la solution pour les navigateurs modernes, mais les balles sont manquantes, j'ai donc ajouter 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:

Extrait de:

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 utiliser li largeur comme 33%, pour 4 colonnes utiliser 25% et ainsi de suite.

cela peut être réalisé en utilisant la propriété CSS de colonne-count sur parent div,

comme

 column-count:2;

Regardez ceci pour plus de détails.

comment faire apparaître la liste des DIV flottantes dans les colonnes, pas les lignes

C'est la façon la plus simple de le faire. CSS seulement.

1. ajouter de la largeur à l'élément ul.
2. ajouter affichage: bloc en ligne 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;
}

<ul class="list">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ul>

vous pouvez le faire très facilement avec le jQuery-colonnes Plugin par exemple pour diviser un ul avec une classe de .mylist vous le feriez

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

voici un live example sur jsfiddle

j'aime mieux cela qu'avec CSS parce qu'avec la solution CSS tout ne s'aligne pas verticalement vers le haut.

plus d'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%; }

Dans updateColumns() besoin if (column >= columns.length) plutôt que if (column > columns.length) pour obtenir la liste de tous les éléments (C est ignorée par exemple):

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 d'héritage dans la réponse supérieure n'a pas fonctionné pour moi parce que je voulais affecter plusieurs listes sur la page et la réponse suppose une liste unique plus il utilise un peu d'état global. Dans ce cas, je voulais modifier chaque liste à l'intérieur d'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]);
    }
});

Avec Bootstrap... Cette réponse ( https://stackoverflow.com/a/23005046/1128742 ) m'a fait 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>

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

Thisd était une solution parfaite pour moi, à la recherche depuis des années:

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