CSS Dwie kolumny list - elastyczne połączenie w jedną kolumnę

Question

Mam dwie listy, które przestawiam na dwie kolumny. Chcę, aby tak było na małych ekranach, przedmioty stają się jedną kolumną, ALE chciałbym na przemian zmieniać przedmioty.

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

Rezultat powinien wyglądać tak na małych ekranach.

Oto moje początkowe jsfiddle. Czy zamiast tego powinienem utworzyć jedną listę z liwidth ustawioną na 50%? Chciałem sprawdzić, czy było to możliwe, zachowując znaczniki HTML w taki sposób, w jaki jest to możliwe.

http://jsfiddle.net/aAhX9/

Answer 1

Jedynym sposobem, aby to zrobić (poza pewnym bardzo pracochłonne pozycjonowania) jest łączenie elementów na jednej liście, dając każdemu li się nazwa-klasy i stylizacji je odpowiednio:

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

Jak zauważył Haszem, w komentarzach poniżej, byłoby możliwe użycie selektora :nth-child() zamiast klasy nazw, projektować różne li elementy lewo lub w prawo:

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

Nie można tego zrobić z dwoma ul. Możesz jednak umieścić po dwie wartości: span w każdym .

Przykład:

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