मेरी अनियंत्रित सूची को टेबल की तरह कैसे शैलीबद्ध करें?

Question

मैं केवल एक <UL> है और वह नीचे हम <LI>

<ul> 
    <li>1<li> 
    <li>2<li> 

    <li>3</li> 
    <li>4<li> 

</ul> 

का समूह है अब मैं उन्हें तालिका के रूप में दिखाने के लिए, कृपया मुझे सीएसएस के साथ मदद, हम कैसे एक तालिका के रूप दिखा सकते हैं चाहता था में यूएल/LI ऊपर के लिए तालिका प्रारूप नीचे, 2 LI एक टी.आर. (दो टीडी) और इतने पर में सेट ....

Answer 1

ठीक है, यहाँ एक संभव समाधान है:

ul { 
    width: 450px;   /* change it to whatever you like */ 
    position: relative; 

    /* these should be probably already set up by `reset.css` */ 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 

ul:before, ul:after { 
    text-align: center; 
    display: block; 
    border: 1px solid black; 
    border-bottom: 0; 
    width: 48%; 
} 

ul:before { 
    content: 'col1'; 
    border-right: 0;  
} 

ul:after { 
    content: 'col2'; 
    position: absolute; 
    top: 0; 
    left: 48%; 
    margin-left: 1px;  
} 

li { 
    text-align: right; 
    width: 48%; 
    float: left; 
    border: 1px solid black; 
    margin-bottom: -1px; 
} 

li:nth-child(even) { 
    margin-left: -1px; 
} 

यह काम करता है (JSFiddle; क्रोम, फायरफॉक्स और ओपेरा में परीक्षण किया; nth-child(even) चयनकर्ता जाहिर IE8 में विफल रहता है, तो आप वर्ग या अन्य साधनों के साथ यह अनुकरण करने के लिए है, लेकिन अन्यथा यह अभी भी ठोस है), लेकिन मैं मानता हूं कि मैं इसके बारे में दोषी महसूस करता हूं।)

पीएस आप "सेल" सामग्री के लिए गद्दी जोड़ना चाहते हैं, तो नहीं here की तरह के रूप में अच्छी तरह से उनकी चौड़ाई बदलने के लिए,:

li { 
    width: 47%; 
    padding-right: 1%; 
} 

Answer 2

आप display: table गुण के माध्यम से एक सूची 2 कॉलम में (अधिक से अधिक 2 आइटम वाले) परिवर्तित नहीं कर सकते क्योंकि आपको तालिका-पंक्ति के रूप में कार्य करने के लिए कुछ तत्व की आवश्यकता है। तालिका-पंक्ति के रूप में कार्य करने वाले तत्व के बिना, display: table-cell पर सेट किए गए सभी आसन्न तत्वों को एक अज्ञात तालिका-पंक्ति तत्व के भीतर निहित किया जाएगा जिसे किसी भी तरह से संशोधित या स्टाइल नहीं किया जा सकता है। या तो तैरता/li रों पर इनलाइन-ब्लॉक या ul पर columns संपत्ति का उपयोग कर:

हैं तो आपको या तो मार्कअप (टेबल या सूचियों का सूचियों का उपयोग करने के लिए) बदलने के लिए या अपने सीएसएस करने के लिए एक अलग दृष्टिकोण का प्रयोग है।

Answer 3

यह वास्तव में देर से जवाब है, लेकिन मुझे लगता है कि यह एक आम विषय है। Here's a codepen I made।

जाहिर है यह सिर्फ एक शुरुआती बिंदु है। इसमें बीजी या सीमाओं जैसी शैलियों को जोड़ने का कुछ उदाहरण भी है। यदि 'कोशिकाओं' में कुछ मनमानी सामग्री होती है, तो आपको उदाहरणों के लिए आयाम समायोजित करना होगा। मैं थंबनेल दीर्घाओं के लिए कोड इस तरह का उपयोग करते हैं, उदाहरण के लिए, जहां सीमाओं या bgs बारे में चिंता करने की जरूरत नहीं है के लिए और यह काफी प्राथमिक कोड है (उदाहरण के एक 2x3 तालिका के लिए है, codepen देखें):

ul{ 
    list-style:none; 
} 

ul li{ 
    float:left; 
    padding:10px; 
    border-bottom:1px solid #000; 
    border-right:1px solid #000; 
} 

ul li:nth-child(3n){ 
    background-color:#888; 
} 

ul li:nth-child(3n+1){ 
    clear:both; 
    border-left:1px solid #000; 
    background-color:#ccc; 
} 

ul li:nth-child(-n+3){ 
    border-top:1px solid #000; 
} 

आशा करता हूँ की ये काम करेगा।