Comment afficher une liste non ordonnée en deux c

Question

Avec le code HTML suivant, quelle est la méthode la plus simple pour afficher la liste en 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 fonctionner avec Internet Explorer.

Answer 1

Navigateurs modernes

tirez parti du module 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/

Anciens navigateurs

Malheureusement, pour le support d'IE, vous aurez besoin d'une solution de code qui implique le JavaScript et la manipulation des domaines. Cela signifie que chaque fois que le contenu de la liste change, vous devrez effectuer l'opération de réorganisation de la liste en colonnes et de réimpression. La solution ci-dessous utilise jQuery pour des raisons de concision.

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

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

EDITAR:

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

A  E
B  F
C  G
D

alors que le PO demandait une variante correspondant à ce qui suit :

A  B
C  D
E  F
G

Pour réaliser cette variante, il suffit de modifier 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;
    });
}

Answer 2

J'ai étudié la solution de @jaider, qui a fonctionné, mais je propose une approche légèrement différente, qui me semble plus facile à mettre en œuvre et qui s'est avérée efficace sur 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 peut poser des problèmes d'affichage en fonction de la manière dont le navigateur met en page votre site Web.

Pour qu'il s'affiche dans le format :

A B
C D
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. Bonne continuation et merci @jaider car votre réponse m'a permis de découvrir cela.

Answer 3

J'ai essayé de poster ce message en tant que commentaire, mais je n'ai pas réussi à afficher les colonnes correctement (comme dans votre question).

Vous demandez :

A B

C D

E

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

A D

B E

C

... donc soit la réponse est incorrecte, soit la question l'est.

Une solution très simple serait de définir la largeur de votre <ul> et ensuite flotter et définir la largeur de votre <li> comme suit

<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 le manque de support d'IE).

Answer 4

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

Answer 5

Voici une solution possible :

Snippet :

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