सीएसएस सूची के दो कॉलम - एक कॉलम में उत्तरदायी विलय

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 है। क्या मुझे इसके बजाय liwidth50% पर एक सूची बनाना चाहिए? मैं देखना चाहता था कि 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।

हाशेम द्वारा बताया गया है, नीचे टिप्पणी में, यह संभव विभिन्न 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

आप दो 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> 

सीएसएस:

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