CSS Zwei Spalten von Listen - responsive Zusammenführung in eine Spalte

Question

Ich habe zwei Listen, die ich in zwei Spalten schweben. Ich möchte es auf kleinen Bildschirmen machen, die Gegenstände werden zu einer Spalte, ABER ich möchte die Gegenstände wechseln.

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

So sollte das Ergebnis auf kleinen Bildschirmen aussehen.

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

Hier ist mein Start jsfiddle. Soll ich stattdessen eine Liste mit liwidth auf 50% setzen? Ich wollte sehen, ob dies möglich war, und dabei das HTML-Markup so beibehalten, wie es ist.

http://jsfiddle.net/aAhX9/

Answer 1

Der einzige Weg, diese (außerhalb von einigen sehr mühsam Positionierung) zu tun ist, um die Elemente in einer einzigen Liste zu kombinieren, die jeweils li eine Klasse-Namen geben und sie in geeigneter Weise Styling:

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

Wie Hashem erwähnt, in den Kommentaren unten, wäre es möglich, den :nth-child() Selektor zu verwenden, anstatt Klassennamen, die verschiedene li Elemente links nach Stil oder rechts:

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

Sie können das nicht mit zwei ul tun. Sie können jedoch zwei span in jedem li setzen.

Beispiel:

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