CSS Deux Colonnes de Listes sensible de fusionner en une seule colonne

J'ai deux listes que je suis flottant dans deux colonnes. Je veux faire en sorte sur les petits écrans, les éléments deviennent une seule colonne, MAIS j'aimerais alterner les éléments.

<div>
    <ul class="left">
        <li>Item A</li>
        <li>Item B</li>
        <li>Item C</li>
        <li>Item D</li>
    </ul>
    <ul class="right">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</div>

De sorte que le résultat devrait ressembler à ceci sur de petits écrans.

Item A
Item 1
Item B
Item 2
Item C
Item 3
Item D
Item 4

Voici mon départ jsfiddle. Dois-je plutôt faire une liste avec li width ensemble de 50%? Je voulais voir si c'était possible tout en gardant le code HTML de la façon dont il est.

http://jsfiddle.net/aAhX9/

  • Combien sont les listes de gros?
  • C'est ce que je pensais.
  • Seulement 5 articles. Je pense que je ferais fusionner les listes avant de faire un troisième pour mobile.
InformationsquelleAutor Matt | 2013-08-25
  1. 11

    La seule façon de le faire (en dehors de quelques très laborieux de positionnement) est de combiner les éléments en une seule liste, en donnant à chacun li un nom de classe et de style de façon appropriée:

    <div>
    <ul>
        <li class="left">Item A</li>
        <li class="right">Item 1</li>
        <li class="left">Item B</li>
        <li class="right">Item 2</li>
        <li class="left">Item C</li>
        <li class="right">Item 3</li>
        <li class="left">Item D</li>
        <li class="right">Item 4</li>
    </ul>
</div>

li {
    list-style-type: none;
    width: 50%;
}

li.left {
    float: left;
    background-color: #0f0;
}

li.right {
    float: right;
    background-color: #00f;
}

@media only screen and (max-width: 480px) {
    .left, .right {
        float: none;
        width: 100%;
    }
}

    Mise à jour JS Fiddle démo.

    Comme indiqué par Hachem, dans les commentaires ci-dessous, il serait possible d'utiliser la :nth-child() sélecteur, plutôt que des noms de classe, de style différents li éléments à gauche ou à droite:

    li:nth-child(odd) {
    float: left;
    background-color: #0f0;
}

li:nth-child(even) {
    float: right;
    background-color: #00f;
}

@media only screen and (max-width: 480px) {
    li {
        float: none;
        width: 100%;
    }
}

    Mise à jour JS Fiddle démo.

    • Brillant @David. excellent travail.
    • Il a été une cause de grande lamentation, entre mes parents, que j'ai encore à découvrir ce de la boîte de est, ni où... 😉
    • Aussi à l'aide de :nth-child(odd) et :nth-child(even) pourrait être une option.
    • c'est un très bon point; édité dans la réponse, merci!
    • et :nth-child(even) jsfiddle.net/kevinPHPkevin/aAhX9/8 pourrait fonctionner, mais alors il faudrait limiter votre navigateur de bureau de compatibilité.
    • Et combien de navigateurs prennent en charge CSS3 media query? 99,9% des navigateurs prennent en charge les requêtes de média, sera en charge nth-child sélecteur ainsi.
    • Les médias requête ne doit être pris en charge par les navigateurs mobiles dans l'exemple original que le li ont été ciblés par classe, donc un ordinateur de bureau pourrait flotter sans problème. Le :nth-child(odd) et :nth-child(even) option ne sera pas obtenir flottait par les non-navigateurs modernes et de rester une liste unique.
    • très vrai. La deuxième option serait de rester une liste unique dans un ancien navigateur. la première option est la meilleure. Prend en charge les ordinateurs de bureau et mobiles en cas de besoin. Il semblerait que certaines personnes sont confus par ce concept
    • le bureau n'a pas besoin de l'appui de la requête de média dans cet exemple!. Le premier exemple serait de travailler sur un iphone et ie7, le second ne l'est pas.
    • Mais iOS depuis la v3.2 7.0 support :nth-child(). et ne IE7 de médias de soutien de la requête elle-même? Si oui, la fourche correspondent page de caniuse.com et envoyer une demande d'extraction.
    • Ok, un fusionnée liste semble être la meilleure solution réactive. Et il n'a pas vraiment de mal à la sémantique des éléments de la liste dans mon cas, donc je vais le faire

    InformationsquelleAutor David Thomas
  2. 1

    Vous ne pouvez pas le faire avec deux ul. Toutefois, vous pouvez mettre deux span dans chaque li.

    Exemple:

    HTML:

    <div>
    <ul>
        <li><span class="left">Item A</span><span class="right">Item 1</span></li>
        <li><span class="left">Item B</span><span class="right">Item 2</span></li>
        <li><span class="left">Item C</span><span class="right">Item 3</span></li>
        <li><span class="left">Item D</span><span class="right">Item 4</span></li>
    </ul>
</div>

    CSS:

    ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

span{
    width: 50%;
}


.left {
    float: left;
    background:blue;
}


.right {
    float: right;
    background:Red;
}


@media only screen and (max-width: 480px) {
    .left, .right {
        float: none;
        width: 100%;
        display:blocK;
    }
}

    JSFiddle

    • Il fonctionne visuellement, mais à partir d'un point de vue sémantique, ce n'est pas consistante
    InformationsquelleAutor Vucko