2013-01-22 14 views
6

मैं कई "ओएल" सूचियां चाहता हूं जहां काउंटर वैल्यू सूचियों के बीच रीसेट नहीं करता है। यह कहने का एक और तरीका यह है कि मैं दूसरी सूची में पहले "ली" के काउंटर को पिछली सूची के अंतिम तत्व से काउंटर वैल्यू से अधिक होना चाहता हूं। क्या कोई सीएसएस जादू है जो यह करेगा?काउंटर को रीसेट किए बिना सूचियों में सीएसएस काउंटर का उपयोग कैसे करें?

उत्तर

2

बस सीएसएस के साथ बिल्कुल नहीं। यह आपको कुछ control over counters (और support is pretty good) प्रदान करता है, लेकिन यह अभी भी इसके व्यवहार में स्थिर है। तो यह काम करता है:

<html> 
<head> 
<style> 
    #list-one { 
     counter-reset : item; 
    } 
    #list-two { 
     counter-reset : item 3; 
    } 
    li { 
     display : block; 
    } 
    li:before { 
     display : inline-block; 
     content : counter(item) ". "; 
     counter-increment : item; 
    } 
</style> 
</head> 
<body> 
    <ol id="list-one"> 
     <li>One</li><li>Two</li><li>Three</li> 
    </ol> 
    <ol id="list-two"> 
     <li>Four</li><li>Five</li><li>Six</li> 
    </ol> 
</body> 
</html> 

... लेकिन तुम सिर्फ एक दूसरे स्वचालित रूप से एक दूसरे के बाद दो सूचियों ड्रॉप नहीं कर सकते हैं और है जहाँ पर अन्य दूर छोड़ दिया ("3" दूसरा CSS नियम में देखते हैं)। थोड़ी सी रचनात्मकता के साथ, आप शायद स्टाइल को कुछ PHP या जो भी आप अपनी साइट बनाने के लिए उपयोग कर रहे हैं, के साथ स्टाइल कर सकते हैं। यह निश्चित रूप से आपकी स्थिति के विवरण पर निर्भर है।

1

जबकि Su's answer काम करेगा, आपको इतना भारी हाथ होने की आवश्यकता नहीं है। बस शीर्ष पर काउंटर रीसेट करें, और हर जगह आप इसे इस्तेमाल करते हैं, यह बढ़ेगा।

body { 
    counter-reset: item; 
} 

li { 
    display: block; 
} 

li:before { 
    display: inline-block; 
    content: counter(item) ". "; 
    counter-increment: item; 
} 

इस example

+0

पूरे सही जवाब है कि देखते हैं। –

संबंधित मुद्दे