Comment puis-je afficher une <ul> comme deux side-by-side colonnes à l'aide de CSS?

Comment puis-je faire 2 colonnes composé de 3 lignes ?

<ul>

<li>Item-1</li>
<li>Item-2</li>
<li>Item-3</li>

<li>Item-4</li>
<li>Item-5</li>
<li>Item-6</li>

</ul>

Merci

Tu veux dire quoi par "flux vers la droite?" Avez-vous une capture d'écran?
Découvrez saint graal sur le sujet
Je ne comprends pas... pourquoi ne pas simplement les faire deux listes et flotter à gauche?
C'est la question..je ne peux pas, le balisage est généré par le biais d'un CMS, crée une liste unique. Ce serait génial si il y avait un moyen de contrainte de hauteur, alors que d'autres éléments flottent à droite
Leur demander d'élaborer !

OriginalL'auteur Abuzzy | 2011-10-19

  1. 7

    Une simple CSS solution serait d'avoir la Liste des Articles 1/2 de la largeur, et ont flotter à gauche. C'est une solution acceptable, aussi longtemps que vous pouvez accepter la sortie suivante.

    Item 1         Item 2
Item 3         Item 4
Item 5         Item 6

    Le CSS serait:

    ul.class-name li {
    float:left; width:50%;
}

    Il y a quelques simples considérations:

    • Dans IE pré 9, votre conteneur (ul) doit avoir une largeur attribuée.
    • À 50%, vous n'avez pas de salle pour le remplissage ou la frontière basé sur la façon dont IE pré 9 calcule ces vs d'autres navigateurs. (c'est à dire un intègre un rembourrage dans la largeur spécifiée, l'autre ajoute de rembourrage pour la largeur). En allant vers quelque part entre 47 et 49% souvent résout ces misérables insectes.

    Malheureusement, c'est la seule façon de la sortie peut être si vous êtes à la recherche pour le pur CSS. Si vous avez besoin de:

    Item 1      Item 4
Item 2      Item 5
Item 3      Item 6

    ... alors, Valchris solution peut être le meilleur pour vous.

    FuzzicalLogic

    Je préfère encore css simple solution plutôt que de css3 solution ou js.

    OriginalL'auteur Fuzzical Logic

  2. 1

    Voici une terrible-mais-amusant CSS1 solution j'ai mis en place il y a des années:

    http://phrogz.net/tmp/two-column-list-pure-css.html

    🙂

    Je l'aime!!!!!!

    OriginalL'auteur Phrogz

  3. 0

    http://www.w3.org/Style/Examples/007/evenodd.en.html

    <ul>   
    <li> Test 1</li>
    <li> Test 1</li>
    <li> Test 1</li>
    <li> Test 1</li>  
</ul>

    CSS est:

    li:nth-child(n+3) {
    background-color:white; 
}

    Cela devrait aider

    utiliser ce site: http://cssdesk.com/ faire la démonstration de votre code.

    OriginalL'auteur Valchris