2012-09-10 25 views
11

उदाहरण यहाँ वेबकिट पर CSS3 के स्तंभों का उपयोग: http://jsfiddle.net/R7GUZ/3/कैसे सूची शैली ठीक करने के लिए नहीं दिख रहा जब

मैं एक माता पिता राजभाषा

-webkit-column-count: 2; 
-moz-column-count: 2; 
column-count: 2; 
के साथ स्टाइल के लिए वेबकिट में काम करने के लिए एक समय list-style हो रही की एक बिल्ली हो रही है

मैं सीएसएस 3 के साथ कॉलम में ऑर्डर की गई सूची को कैसे प्रारूपित करूं और अभी भी list-style स्टाइल को बनाए रखूं?

  <ol class="text-col2"> 
       <li> 
        <strong>Can we call you?</strong> 
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia.</p> 
       </li> 

       <li> 
        <strong>Can we call you?</strong> 
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia.</p> 
       </li> 
      </ol> 

उत्तर

15

20px जोड़ना li रों को मार्जिन छोड़ दिया चाल

ol li { 
    list-style: decimal; 
    margin-left: 20px 
} 
+0

धन्यवाद, यह समस्या मुझे पागल कर रही थी जब तक मुझे लगा कि यह एक कॉलम वी सूची-शैली-छवि समस्या थी। आपका समाधान काम करता है, हालांकि मैंने ओएल/उल तत्व से पैडिंग-बाएं भी हटा दिया ताकि मुझे अनावश्यक अतिरिक्त रिक्ति न हो। –

7

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

OL { 
    list-style-position: inside; 
} 

नोट अगर आप margin और padding गुण (jsFiddle पर अपने उदाहरण है जहाँ सीएसएस सामान्यीकृत किया गया है की तरह) रीसेट कर दिया है, तो आप उन्हें करने के लिए सेट करना होगा सही मान ताकि स्तंभ सही ढंग से स्वरूपित हो।