CSS兩列列表 - 響應合併成一列

Question

我有兩個列表，我漂浮成兩列。我想在小屏幕上這樣做，項目成爲一列，但我想交替項目。

<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。我是否應該將liwidth設爲50%？我想看看這是否可能，同時保持HTML標記的方式。

http://jsfiddle.net/aAhX9/

Answer 1

做到這一點（有些很費力的定位外）的唯一方法是將元素組合成一個單獨的列表，給每個li一個類名，並適當設置其樣式：

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

正如哈希姆指出，在下面的意見，將有可能使用:nth-child()選擇，而不是類名稱，樣式留下的各種li元素，或右：

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

你不能這樣做，兩個ul。但是，您可以在每個li中放置兩個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