क्यों क्रोम में CSS3 के कॉलम का उपयोग करके सूचियां

Question

मैंने देखा है कि क्रोम मेरी सूची में आइटम पर नंबर मिटा रहा था जब मैं स्तंभ गिनती हेरफेर करने के लिए सीएसएस जोड़ने पर आइटम नंबर को हटा ...

उदाहरण के लिए:

<ol style =-webkit-column-count: 2;..."> 
    .... 
</ol> 

उपर्युक्त ली को ओवरफ्लो ली को एक अलग कॉलम में लक्षित करने का प्रबंधन करता है लेकिन यह डिफ़ॉल्ट आइटम नंबरिंग को भी हटा देता है। यह फ़ायरफ़ॉक्स में नहीं होता है, केवल क्रोम।

कोई विचार?

Answer 1

आप के आसपास हमेशा <div> फेंक सकते हैं और के बजाय <div> एकाधिक कॉलम दे सकते हैं।

<div style = -webkit-column-count: 2;...><ol> 
    .... 
</ol></div> 

जब मैं ऐसा करता हूं, हालांकि, मैं दूसरे कॉलम के साथ समाप्त होता हूं, किसी कारण से पहले कॉलम से एक पंक्ति अधिक होता है। क्रोम में भी होता है।

संपादित करें: मेरे ऊपर समस्या का समाधान सिर्फ <ol> के लिए एक शून्य मार्जिन जोड़ने के लिए था, इसलिए इस ठीक काम करना चाहिए: अजीब तरह पर्याप्त

<div style = -webkit-column-count: 2;...><ol style = margin: 0;> 
    .... 
</ol></div> 

, <ol> पर कुछ गद्दी होने से छुटकारा पाने के लिए लगता है संख्याएं भी, इसलिए यदि आपके पास कहीं कहीं पैडिंग है जो अपराधी हो सकता है।

Answer 2

ऐसा लगता है कि संख्याएं वास्तव में छिपी हुई हैं। यह निम्नलिखित संपत्ति का उपयोग करके हल किया जा सकता:

OL { 
    list-style-position: inside; 
} 

Answer 3

अक्सर किसी के शैली पत्रक एक एचटीएमएल रीसेट, जो बीच में सूची आइटम पर एक padding: 0; रीसेट है होगा।

जबकि निम्नलिखित, स्टीफन द्वारा एक आकर्षण की तरह काम करता है,

ul { 
    list-style-position: inside; 
} 

आप भी अपने सूची आइटम एक padding-left दे सकते हैं: तत्व बाहर तैनात किसी कारण सूची शैलियों के लिए

padding-left: 16px; 

Answer 4

(डिफ़ॉल्ट) छुपाए जाते हैं जब आप column-width नियम लागू करते हैं। नीचे दिए गए सबसे अच्छे मैं क्रोम में अन्य उत्तरों और अपने स्वयं के प्रयोग के आधार पर 'अपेक्षित' व्यवहार को आज़माने और अनुकरण करने के लिए आ सकता हूं।

Demo

एचटीएमएल

<div class="col-wrapper"> 
    <ol> 
     <li>1</li> 
     <li>2</li> 
     <li>3</li> 
     <li>4</li> 
     <li>5</li> 
     <li>6</li> 
     <li>7</li> 
     <li>8</li> 
    </ol> 
</div> 

सीएसएस

.col-wrapper { 
    -moz-column-width: 200px; 
    -moz-column-gap: 1em; 
    -webkit-column-width: 200px; 
    -webkit-column-gap: 1em; 
    column-width: 200px; 
    column-gap: 1em; 

    /* (optional) use ol's margin here */ 
    margin-top: 16px; 
} 

.col-wrapper ol { 
    /* clear top margin of ol */ 
    margin-top: 0; 
}