सीएसएस के साथ 1.1, 1.2, 1.3 (के बजाय सिर्फ 1, 2, 3,…) की तरह दिखने वाले परिणाम का आदेश दिया जा सकता है?

Question

क्या एक आदेशित सूची सीएसएस के साथ 1.1, 1.2, 1.3 (बजाय केवल 1, 2, 3, ...) की तरह दिखने वाले परिणाम उत्पन्न कर सकती है? अब तक, उपयोग list-style-type:decimalने केवल 1, 2, 3, 1.1, 1.2, 1.3, 1.3 का उत्पादन किया है।

Comments

मैं जकूब जिरुटका द्वारा इसके साथ स्वीकृत उत्तर की तुलना करने का सुझाव दूंगा। मुझे लगता है कि उत्तरार्द्ध और भी बेहतर है।

— फ्रैंक कॉनिजन

सुरुचिपूर्ण समाधान। किसी भी विचार क्यों विकिपीडिया इसके बजाय अपने सामग्री वर्गों के लिए एक उल का उपयोग करता है?

— मैट्रिपेंट्स

@davnicwil मैं सहमत हूँ; ऐसा लगता है कि मैंने शायद सितंबर में डुप्लिकेट को गलत क्रम में लागू किया था।

— टायलरएच

कूल, अब मुझे अजीब लग रहा है क्योंकि यह मेरे साथ कभी नहीं हुआ, यह उस तरह एक साधारण त्रुटि हो सकती है - माफी!

— davnicwil

Answer 1

आप ऐसा करने के लिए काउंटरों का उपयोग कर सकते हैं :

निम्नलिखित शैली पत्रक संख्या नेस्ट आइटम को "1", "1.1", "1.1.1", आदि के रूप में सूचीबद्ध किया है।

OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }

उदाहरण

ol { counter-reset: item }
li{ display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }

<ol>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
  <li>li element</li>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
</ol>

देखें नेस्टेड काउंटर और गुंजाइश अधिक जानकारी के लिए।

Comments

बहुत बढ़िया जवाब। इसके लिए क्या समर्थन है?

— जेसन मैकक्रेरी

@ जेसन मैकररी: ठीक है, यह नीचे की तरफ है: काउंटर 8 संस्करण तक IE में समर्थित नहीं हैं ।

— Gumbo

यह समाधान एक छोटी सी बात को याद करता है: आइटम नंबर के बाद डॉट। यह मानक सूची शैली की तरह नहीं दिखता है। नियम के लिए एक बिंदु जोड़कर ठीक करें li:before: content: counters(item, ".")". ";

— LS

यह एक घटिया जवाब है। यह ठीक से काम नहीं करता है। नीचे जकूब जिरुटका द्वारा जवाब की जाँच करें

— श्री पाब्लो

@ गुंबो मुझे पता है, और जैकब के जवाब ने मुझे सही नंबरिंग दी।

— श्री पाब्लो

Answer 2

इस पृष्ठ पर कोई भी समाधान सभी स्तरों और लंबे (लिपटे) पैराग्राफ के लिए सही और सार्वभौमिक रूप से काम नहीं करता है। मार्कर (1., 1.2, 1.10, 1.10.5,…) के चर आकार के कारण एक निरंतर इंडेंटेशन प्राप्त करना वास्तव में मुश्किल है; यह सिर्फ "फेक" नहीं हो सकता है, यहां तक ​​कि प्रत्येक संभावित इंडेंटेशन स्तर के लिए पूर्व निर्धारित मार्जिन / पैडिंग के साथ भी नहीं।

मैंने आखिरकार एक समाधान निकाला जो वास्तव में काम करता है और किसी भी जावास्क्रिप्ट की आवश्यकता नहीं है।

यह फ़ायरफ़ॉक्स 32, क्रोमियम 37, IE 9 और एंड्रॉइड ब्राउज़र पर परीक्षण किया गया है। IE 7 और पिछले पर काम नहीं करता है।

सीएसएस:

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol > li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;    
}

li ol > li {
  margin: 0;
}

li ol > li:before {
  content: counters(item, ".") " ";
}

उदाहरण:

पर यह प्रयास करें JSFiddle , पर यह कांटा सार ।

Comments

इस प्रकार के संकेत को प्राप्त करने के लिए अच्छी नौकरी। मैं फिर भी तर्क दूंगा कि आपके द्वारा सूचीबद्ध किए गए इंडेंटेशन के पहले 2 मामले सही और गलत के बजाय वरीयता के मामले हैं। केस 1 और केस 2 पर विचार करें - बाद वाला रिक्ति पहले से बहुत अधिक स्तरों में निचोड़ने का प्रबंधन करता है, जबकि रिक्ति अबाधित हो जाती है, जबकि अभी भी काफी साफ-सुथरी है। इसके अलावा, एमएस वर्ड और डिफ़ॉल्ट ब्राउज़र स्टाइल दोनों केस 2 इंडेंटेशन का उपयोग करते हैं। मुझे लगता है कि वे भी गलत कर रहे हैं?

— शाऊल फूटले

@ शाऊल-फूटले टाइपोग्राफी के मामले में यह गलत है। नेस्टेड स्तर के पागल संख्या के साथ आपका उदाहरण दर्शाता है कि नेस्टेड नंबरिंग कई स्तरों के लिए उपयुक्त नहीं है, लेकिन यह बहुत स्पष्ट है। एमएस वर्ड एक टाइपिंग सिस्टम नहीं है, यह एक मात्र दस्तावेज प्रोसेसर है जिसमें खराब टाइपोग्राफी है। डिफ़ॉल्ट ब्राउज़र स्टाइल ... ओह, आप टाइपोग्राफी के बारे में ज्यादा नहीं जानते हैं, क्या आप?

— जकूब जिरुटका

यह वास्तव में सभी स्तरों और लंबे पैराग्राफ के लिए (तकनीकी रूप से) काम करता है। यदि यह दर्जनों स्तरों का उपयोग करने के लिए उचित है, तो यह एक और सवाल है जिसका तकनीकी समाधान से कोई लेना-देना नहीं है। मुद्दा यह है कि आपको प्रत्येक घोंसले के स्तर के लिए एक सीएसएस नियम को पूर्वनिर्धारित करने की आवश्यकता नहीं है जैसे कुछ अन्य समाधानों के साथ।

— जकूब जिरुटका

हालांकि मैं नहीं कहूंगा कि अन्य उत्तरों के साथ स्वाभाविक रूप से "गलत" है, मैं कहूंगा कि वे अपूर्ण हैं। यह जवाब हाजिर है, और यहां तक ​​कि एक भयानक विचित्र स्टाइल में काम किया है जो मैं संशोधन कर रहा हूं।

— डैनियलएम

@tremby: इस विसंगति को "डिस्प्ले: टेबल" के बजाय "उपयोग: टेबल-पंक्ति" के उपयोग से हल किया जा सकता है। यह समस्या यह है कि ली तब किसी भी मार्जिन / पैडिंग का उपयोग नहीं कर सकता है क्योंकि तालिका-पंक्तियाँ हमेशा अपनी सामग्री द्वारा आकार में होती हैं। इसके बाद "डिस्प्ले: ब्लॉक" के साथ "ली:" जोड़कर काम किया जा सकता है। एक पूर्ण उदाहरण के लिए jsField देखें । अतिरिक्त बोनस के रूप में मैंने संख्याओं को सही संरेखित करने के लिए "text-align: right" को "li:" से पहले जोड़ा।

— एमएमएलआर

Answer 3

चुना हुआ उत्तर एक शानदार शुरुआत है, लेकिन यह अनिवार्य रूप list-style-position: inside;से सूची की वस्तुओं पर स्टाइल करने के लिए मजबूर करता है , जिससे लिपटे पाठ को पढ़ना मुश्किल हो जाता है। यहाँ एक सरल समाधान है जो संख्या और पाठ के बीच के मार्जिन पर नियंत्रण देता है, और डिफ़ॉल्ट व्यवहार के अनुसार संख्या को सही-संरेखित करता है।

ol {
    counter-reset: item;
}
ol li {
    display: block;
    position: relative;
}
ol li:before {
    content: counters(item, ".")".";
    counter-increment: item;
    position: absolute;
    margin-right: 100%;
    right: 10px; /* space between number and text */
}

JSFiddle: http://jsfiddle.net/3J4Bu/

Comments

एक नकारात्मक पक्ष यह है कि प्रत्येक सूची आइटम के अंत में एक अवधि जोड़ी जाती है।

— डेविन स्टडर

@ डैविन स्टाकर: यह केवल डिफ़ॉल्ट olव्यवहार के अनुसार प्रत्येक संख्या के अंत में एक अवधि जोड़ता है । संपत्ति "."से अंतिम को हटाकर इसे आसानी से हटाया जा सकता है content, लेकिन यह मुझे थोड़ा अजीब लगता है।

— शाऊल फूटले

Answer 4

यहां पोस्ट किए गए समाधान मेरे लिए अच्छी तरह से काम नहीं करते थे, इसलिए मैंने इस प्रश्न के लोगों और निम्नलिखित प्रश्न का मिश्रण किया: क्या HTML में बहु-स्तरीय ऑर्डर की गई सूची बनाना संभव है?

/* Numbered lists like 1, 1.1, 2.2.1... */
ol li {display:block;} /* hide original list counter */
ol > li:first-child {counter-reset: item;} /* reset counter */
ol > li {counter-increment: item; position: relative;} /* increment counter */
ol > li:before {content:counters(item, ".") ". "; position: absolute; margin-right: 100%; right: 10px;} /* print counter */

परिणाम:

नोट: स्क्रीनशॉट, यदि आप स्रोत कोड या जो कुछ भी इस पोस्ट से देखना चाहते हैं: http://estiloasertivo.blogspot.com.es/2014/08/introduccion-running-lean-y-lean.html

Comments

यह पूरे पृष्ठ से सबसे अच्छा (और सरल) काम का उत्तर है।

— ब्रूनो टोफोलो

Answer 5

नोट: आधुनिक ब्राउज़र में नेस्टेड नंबरिंग बनाने के लिए CSS का उपयोग करें । स्वीकृत उत्तर देखें। निम्नलिखित केवल ऐतिहासिक हित के लिए है।counters

---

यदि ब्राउज़र समर्थन करता है contentऔर counter,

.foo {
  counter-reset: foo;
}
.foo li {
  list-style-type: none;
}
.foo li::before {
  counter-increment: foo;
  content: "1." counter(foo) " ";
}

<ol class="foo">
  <li>uno</li>
  <li>dos</li>
  <li>tres</li>
  <li>cuatro</li>
</ol>

Comments

यह समाधान बुरी तरह से विफल हो जाता है जब सूची में नेस्टेड हैं।

— एलएस

@ एलएलएस आप हमेशा अपनी जरूरत के हिसाब से चयनकर्ताओं को समायोजित कर सकते हैं। .foo > ol > li।

— kennytm

मेरा कहना है कि आपने "1." हार्ड-कोड किया है शैली में। क्या होता है जब मूल सूची में सबलिस्ट दूसरे आइटम का एक बच्चा होता है? आप चाहते हैं कि यह "2." के रूप में प्रकट हो, लेकिन यह हमेशा "1." रहेगा। जिस तरह से यह यहाँ कोडित है। इसका क्या उपाय है? हर संभव संख्या के लिए शैलियों के नए सेट बनाएं? counters()फ़ंक्शन के बजाय ऊपर दिए गए उदाहरणों में फ़ंक्शन का उपयोग करें counter()।

— एलएस

Answer 6

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="author" content="Sandro Alvares - KingRider">
    </head>
    <body>
        <style type="text/css">
            li.title { 
                font-size: 20px; 
                font-weight: lighter; 
                padding: 15px; 
                counter-increment: ordem; 
            }
            .foo { 
                counter-reset: foo; 
                padding-left: 15px; 
            }
            .foo li { 
                list-style-type: none; 
            }
            .foo li:before { 
                counter-increment: foo; 
                content: counter(ordem) "." counter(foo) " "; 
            }
        </style>
        <ol>
            <li class="title">TITLE ONE</li>
            <ol class="foo">
                <li>text 1 one</li>
                <li>text 1 two</li>
                <li>text 1 three</li>
                <li>text 1 four</li>
            </ol>
            <li class="title">TITLE TWO</li>
            <ol class="foo">
                <li>text 2 one</li>
                <li>text 2 two</li>
                <li>text 2 three</li>
                <li>text 2 four</li>
            </ol>
            <li class="title">TITLE THREE</li>
            <ol class="foo">
                <li>text 3 one</li>
                <li>text 3 two</li>
                <li>text 3 three</li>
                <li>text 3 four</li>
            </ol>
        </ol>
    </body>
</html>

परिणाम: http://i.stack.imgur.com/78bN8.jpg

Answer 7

जब मुझे दो सूचियाँ मिलती हैं तो मुझे कुछ समस्या होती है और दूसरा एक DIV के अंदर होता है। दूसरी सूची १.१ पर नहीं २.१ पर शुरू होनी चाहिए

<ol>
    <li>lorem</li>
    <li>lorem ipsum</li>
</ol>

<div>
    <ol>
        <li>lorem (should be 1.)</li>
        <li>lorem ipsum ( should be 2.)</li>
    </ol>
</div>

http://jsfiddle.net/3J4Bu/364/

संपादित करें: मैंने इस समस्या को हल किया है http://jsfiddle.net/hy5f6161/

Answer 8

निकट भविष्य में आप प्यूसीडो-तत्व का उपयोग करने में सक्षम हो सकते हैं::marker कोड के सिर्फ एक लाइन में अन्य समाधानों के समान परिणाम प्राप्त करने के लिए ।

ब्राउज़र संगतता तालिका की जांच करना याद रखें क्योंकि यह अभी भी एक प्रायोगिक तकनीक है। एंड्रॉइड के लिए केवल फ़ायरफ़ॉक्स और फ़ायरफ़ॉक्स लिखने के समय, संस्करण 68 से शुरू, यह समर्थन करता है।

यहाँ एक स्निपेट है जो संगत ब्राउज़र में कोशिश करने पर सही ढंग से प्रस्तुत होगा:

::marker { content: counters(list-item,'.') ':' }
li { padding-left: 0.5em }

<ol>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
  <li>li element</li>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
</ol>

तुम भी विषय पर smashingmagazine द्वारा इस महान लेख की जाँच करना चाहते हो सकता है ।

Answer 9

मुझे इसे 12 में पोस्ट किए गए समाधान में जोड़ने की आवश्यकता थी क्योंकि मैं एक सूची का उपयोग कर रहा था जिसमें आदेशित सूची और अनऑर्डेड सूचियों के मिश्रण शामिल थे। कंटेंट: नो-क्लोज़-क्वैड मुझे पता है कि जोड़ने के लिए एक अजीब बात की तरह लगता है, लेकिन यह काम करता है ...

ol ul li:before {
    content: no-close-quote;
    counter-increment: none;
    display: list-item;
    margin-right: 100%;
    position: absolute;
    right: 10px;
}

Answer 10

निम्नलिखित ने मेरे लिए काम किया:

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol > li:before {
  content: counters(item, ".") ") ";
  display: table-cell;
  padding-right: 0.6em;
}

li ol > li {
  margin: 0;
}

li ol > li:before {
  content: counters(item, ".") ") ";
}

यहां देखें: http://jsfiddle.net/rLebz84u/2/

या यह एक http://jsfiddle.net/rLebz84u/3/ अधिक और उचित पाठ के साथ

Comments

देखने के लिए समय की बर्बादी। लगभग पहले के उत्तर के समान। केवल अंतर ")" मार्कर के अंत में जोड़ा गया है।

— जुआनिटोगन १४'१६

Answer 11

यह उचित कोड है यदि आप पहले बच्चे को अन्य सीएसएस के बच्चे का आकार बदलना चाहते हैं।

<style>
    li.title { 
        font-size: 20px; 

        counter-increment: ordem; 
        color:#0080B0;
    }
    .my_ol_class { 
        counter-reset: my_ol_class; 
        padding-left: 30px !important; 
    }
    .my_ol_class li { 
          display: block;
        position: relative;

    }
    .my_ol_class li:before { 
        counter-increment: my_ol_class; 
        content: counter(ordem) "." counter(my_ol_class) " "; 
        position: absolute;
        margin-right: 100%;
        right: 10px; /* space between number and text */
    }
    li.title ol li{
         font-size: 15px;
         color:#5E5E5E;
    }
</style>

html फ़ाइल में।

        <ol>
            <li class="title"> <p class="page-header list_title">Acceptance of Terms. </p>
                <ol class="my_ol_class">
                    <li> 
                        <p>
                            my text 1.
                        </p>
                    </li>
                    <li>
                        <p>
                            my text 2.
                        </p>
                    </li>
                </ol>
            </li>
        </ol>