CSS Due colonne di elenchi - unione reattiva in una colonna

Question

Ho due elenchi che sto fluttuando in due colonne. Voglio farlo così su schermi piccoli, gli elementi diventano una colonna, MA mi piacerebbe alternare gli elementi.

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

Quindi il risultato dovrebbe apparire come questo su schermi piccoli.

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

Ecco il mio jsfiddle di partenza. Dovrei invece creare una lista con liwidth impostato su 50%? Volevo vedere se fosse possibile mantenendo il markup HTML così com'è.

http://jsfiddle.net/aAhX9/

Answer 1

L'unico modo per farlo (fuori di alcuni posizionamento molto laborioso) è quello di combinare gli elementi in un unico elenco, dando ciascuno un nome classe li e styling opportunamente:

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

Updated JS Fiddle demo.

Come notato da Hashem, nei commenti qui sotto, sarebbe possibile utilizzare il selettore :nth-child(), piuttosto che di classe nomi, per lo stile dei vari li elementi a sinistra oa destra:

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

Updated JS Fiddle demo.

Answer 2

Non è possibile farlo con due ul. Tuttavia, è possibile inserire due span in ogni li.

Esempio:

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