CSSリストの2つのカラム - 1つのカラムに応答してマージする

Question

2つのカラムに2つのリストが浮かんでいます。私は小さな画面でそのようにしたい、項目は1つの列になるが、私は項目を交互にしたい。

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

結果は、小さな画面では次のようになります。

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

ここは私の最初のjsfiddleです。代わりにli のリストを50%に設定する必要がありますか？ HTMLマークアップをそのまま維持しながら、これが可能かどうかを見たいと思っていました。

http://jsfiddle.net/aAhX9/

Answer 1

（いくつかの非常に骨の折れるポジショニングの外で）これを行うための唯一の方法は、各liクラス名を与え、それらを適切にスタイリング、1つのリストに要素を組み合わせることである。

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

ハシェムによって示されるように、以下のコメントでは、様々なli左の要素、または右のスタイルするために、むしろクラス名より、:nth-child()セレクタを使用することも可能である。

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

2つではできませんulただし、それぞれliに2つのspanを入れることができます。

例：

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