एचटीएमएल ने सूची 1.1, 1.2 (नेस्टेड काउंटर और स्कोप) काम नहीं करने का आदेश दिया

Question

मैं आदेशित सूची बनाने के लिए नेस्टेड काउंटरों और स्कोप का उपयोग करता हूं:

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

<ol>
    <li>one</li>
    <li>two</li>
    <ol>
        <li>two.one</li>
        <li>two.two</li>
        <li>two.three</li>
    </ol>
    <li>three</li>
    <ol>
        <li>three.one</li>
        <li>three.two</li>
        <ol>
            <li>three.two.one</li>
            <li>three.two.two</li>
        </ol>
    </ol>
    <li>four</li>
</ol>

मुझे निम्नलिखित परिणाम की उम्मीद है:

1. one
2. two
  2.1. two.one
  2.2. two.two
  2.3. two.three
3. three
  3.1 three.one
  3.2 three.two
    3.2.1 three.two.one
    3.2.2 three.two.two
4. four

इसके बजाय, यह वही है जो मैं देख रहा हूं (गलत नंबरिंग) :

1. one
2. two
  2.1. two.one
  2.2. two.two
  2.3. two.three
2.4 three <!-- this is where it goes wrong, when going back to the parent -->
  2.1 three.one
  2.2 three.two
    2.2.1 three.two.one
    2.2.2 three.two.two
2.3 four

मेरे पास कोई सुराग नहीं है, क्या कोई देखता है कि यह कहां गलत है?

यहाँ एक JSField है: http://jsfiddle.net/qGCUk/2/

Answer 1

"सीएसएस को सामान्य करें" को अनचेक करें - http://jsfiddle.net/qGCUk/3/ सीएसएस रीसेट का उपयोग उस सूची के सभी मार्जिन और पैडिंग को डिफॉल्ट में 0 पर करता है।

अद्यतन http://jsfiddle.net/qGCUk/4/ - आपको अपने मुख्य में अपनी उप-सूचियों को शामिल करना होगा<li>

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

<ol>
  <li>one</li>
  <li>two
    <ol>
      <li>two.one</li>
      <li>two.two</li>
      <li>two.three</li>
    </ol>
  </li>
  <li>three
    <ol>
      <li>three.one</li>
      <li>three.two
        <ol>
          <li>three.two.one</li>
          <li>three.two.two</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>four</li>
</ol>

Comments

बिंदु के साथ इसके सूचकांक का पालन कैसे करें - जैसे 1.> 1.1. 1.2. 1.3.और इतने पर?

— URL87

बस सीएसएस चयनकर्ताओं को ठीक करना सुनिश्चित करें ताकि यह नेविगेशन सूचियों जैसी चीजों को प्रभावित न करे।

— ओकोमीकरुको

@Okomikeruko "सीएसएस चयनकर्ताओं को ठीक करने" का क्या अर्थ है? क्योंकि मैं वास्तव में आपके द्वारा बताई गई समस्या पर चल रहा हूं - यह ट्रिक न केवल गिने हुए सूची को प्रभावित कर रही है, बल्कि मैं इसका उपयोग अपने HTML में अन्य सूचियों के लिए भी करना चाहता हूं। : - \ Nevermind: मोशे सीमांतोव का जवाब ठीक करता है। :)

— प्रतिपक्षी

@antred तत्व विशेषताएँ पसंद करते हैं idऔर classआपको चयनकर्ताओं के साथ उन तत्वों के लिए सीएसएस को परिभाषित करने की अनुमति देते हैं। आप एक कंबल का उपयोग करते हैं li, ul, olआदि, तो सीएसएस यह के सभी उदाहरणों को प्रभावित करता है। लेकिन यदि आप अपने तत्व को <ol class="cleared">और अपने css चयनकर्ता को सेट करते हैं ol.cleared, तो आप अन्य olतत्वों को अनावश्यक रूप से प्रभावित नहीं करते हैं ।

— Okomikeruko

Answer 2

केवल नेस्टेड सूचियों को बदलने के लिए इस शैली का उपयोग करें:

ol {
    counter-reset: item;
}

ol > li {
    counter-increment: item;
}

ol ol > li {
    display: block;
}

ol ol > li:before {
    content: counters(item, ".") ". ";
    margin-left: -20px;
}

Comments

महान! मेरे लिए बाहर काम किया बॉक्स! टोडा।

— y__

यह सबसे अच्छा उत्तर है क्योंकि यह एक बिंदु के साथ पहला स्तर भी है और सामग्री को इनसेट करता है।

— मार्टिन एक्लेबेन

अगर मैं जोड़ने font-weight: boldके लिए ol ol > li:beforeनेस्टेड सूची के काउंटर हैं bold, लेकिन यह पहली स्तर सूची के काउंटर नहीं है bold?

— सुष्मिता सागर

Answer 3

इसकी जांच करें :

http://jsfiddle.net/PTbGc/

आपका मुद्दा तय हो गया लगता है।

---

मेरे लिए क्या दिखाता है (Chrome और Mac OS X के तहत)

1. one
2. two
  2.1. two.one
  2.2. two.two
  2.3. two.three
3. three
  3.1 three.one
  3.2 three.two
    3.2.1 three.two.one
    3.2.2 three.two.two
4. four

---

मैंने यह कैसे किया

---

के बजाय :

<li>Item 1</li>
<li>Item 2</li>
   <ol>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
   </ol>

कर :

<li>Item 1</li>
<li>Item 2
   <ol>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
   </ol>
</li>

Answer 4

यह एक महान उपाय है! कुछ अतिरिक्त सीएसएस नियमों के साथ आप इसे केवल एमएस वर्ड की सूची की तरह प्रारूपित कर सकते हैं, जिसमें पहली बार एक लटकी हुई पंक्ति है।

OL { 
  counter-reset: item; 
}
LI { 
  display: block; 
}
LI:before { 
  content: counters(item, ".") "."; 
  counter-increment: item; 
  padding-right:10px; 
  margin-left:-20px;
}

Comments

इस दृष्टिकोण के साथ समस्या यह है कि आप सूची संख्याओं की प्रतिलिपि नहीं बना सकते हैं। इसलिए यदि आप बड़ी सूची की नकल करते हैं तो यह बिना संख्या के होगा

— रोहित

Answer 5

मुझे हाल ही में ऐसी ही समस्या का सामना करना पड़ा। फ़िक्स्ड ली आइटम की डिस्प्ले प्रॉपर्टी को ऑर्डर की गई लिस्ट में लिस्ट-आइटम में सेट करना है, और डिस्प्ले ब्लॉक नहीं करना है, और यह सुनिश्चित करना है कि ऑल की डिस्प्ले प्रॉपर्टी लिस्ट-आइटम नहीं है। अर्थात

li { display: list-item;}

इसके साथ, html पार्सर सभी ली को सूची मद के रूप में देखता है और उसे उचित मूल्य प्रदान करता है, और अपनी सेटिंग्स के आधार पर इनलाइन-ब्लॉक या ब्लॉक तत्व के रूप में ol को देखता है, और किसी भी गणना मान को असाइन करने का प्रयास नहीं करता है। यह।

Comments

यह नंबरिंग को डुप्लिकेट करता है।

— 14

Answer 6

मोशे का समाधान बहुत अच्छा है लेकिन समस्या अभी भी मौजूद हो सकती है यदि आपको सूची को अंदर रखने की आवश्यकता है div। (पढ़ें: नेस्टेड सूची पर सीएसएस काउंटर-रीसेट )

यह शैली उस समस्या को रोक सकती है:

ol > li {
    counter-increment: item;
}

ol > li:first-child {
  counter-reset: item;
}

ol ol > li {
    display: block;
}

ol ol > li:before {
    content: counters(item, ".") ". ";
    margin-left: -20px;
}

<ol>
  <li>list not nested in div</li>
</ol>

<hr>

<div>
  <ol>
  <li>nested in div</li>
  <li>two
    <ol>
      <li>two.one</li>
      <li>two.two</li>
      <li>two.three</li>
    </ol>
  </li>
  <li>three
    <ol>
      <li>three.one</li>
      <li>three.two
        <ol>
          <li>three.two.one</li>
          <li>three.two.two</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>four</li>
  </ol>
</div>

आप काउंटर-रीसेट को भी सेट कर सकते हैं li:before।

Comments

क्या होगा अगर मैं .नेस्टेड लिस्ट में रूट लिस्ट नहीं चाहता हूँ ?

— सुष्मिता सागर

Answer 7

अन्य उत्तरों से गुजरने के बाद, मैं इसे लेकर आया, बस क्लास nested-counter-listको रूट olटैग पर लागू करें :

सैस कोड:

ol.nested-counter-list {
  counter-reset: item;

  li {
    display: block;

    &::before {
      content: counters(item, ".") ". ";
      counter-increment: item;
      font-weight: bold;
    }
  }

  ol {
    counter-reset: item;

    & > li {
      display: block;

      &::before {
        content: counters(item, ".") " ";
        counter-increment: item;
        font-weight: bold;
      }
    }
  }
}

सीएसएस कोड :

ol.nested-counter-list {
  counter-reset: item;
}
ol.nested-counter-list li {
  display: block;
}
ol.nested-counter-list li::before {
  content: counters(item, ".") ". ";
  counter-increment: item;
  font-weight: bold;
}
ol.nested-counter-list ol {
  counter-reset: item;
}
ol.nested-counter-list ol > li {
  display: block;
}
ol.nested-counter-list ol > li::before {
  content: counters(item, ".") " ";
  counter-increment: item;
  font-weight: bold;
}

ol.nested-counter-list {
  counter-reset: item;
}

ol.nested-counter-list li {
  display: block;
}

ol.nested-counter-list li::before {
  content: counters(item, ".") ". ";
  counter-increment: item;
  font-weight: bold;
}

ol.nested-counter-list ol {
  counter-reset: item;
}

ol.nested-counter-list ol>li {
  display: block;
}

ol.nested-counter-list ol>li::before {
  content: counters(item, ".") " ";
  counter-increment: item;
  font-weight: bold;
}

<ol class="nested-counter-list">
  <li>one</li>
  <li>two
    <ol>
      <li>two.one</li>
      <li>two.two</li>
      <li>two.three</li>
    </ol>
  </li>
  <li>three
    <ol>
      <li>three.one</li>
      <li>three.two
        <ol>
          <li>three.two.one</li>
          <li>three.two.two</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>four</li>
</ol>

और यदि आपको .नेस्टेड सूची के काउंटर के अंत में अनुगामी की आवश्यकता है तो इसका उपयोग करें:

ol.nested-counter-list {
  counter-reset: item;
}

ol.nested-counter-list li {
  display: block;
}

ol.nested-counter-list li::before {
  content: counters(item, ".") ". ";
  counter-increment: item;
  font-weight: bold;
}

ol.nested-counter-list ol {
  counter-reset: item;
}

<ol class="nested-counter-list">
  <li>one</li>
  <li>two
    <ol>
      <li>two.one</li>
      <li>two.two</li>
      <li>two.three</li>
    </ol>
  </li>
  <li>three
    <ol>
      <li>three.one</li>
      <li>three.two
        <ol>
          <li>three.two.one</li>
          <li>three.two.two</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>four</li>
</ol>

Answer 8

इसे सरल रखें!

नंबर बढ़ाने के लिए और अंत में डॉट को बनाए रखने के लिए सरल और एक मानक समाधान। भले ही आपको सीएसएस सही लगे, अगर आपका एचटीएमएल सही नहीं है तो यह काम नहीं करेगा। निचे देखो।

सीएसएस

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

एस.ए.एस.एस.

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

एचटीएमएल पैरेंट चाइल्ड

यदि आप बच्चे को जोड़ते हैं तो सुनिश्चित करें कि यह माता-पिता के अधीन है li।

<!-- WRONG -->
<ol>
    <li>Parent 1</li> <!-- Parent is Individual. Not hugging -->
        <ol> 
            <li>Child</li>
        </ol>
    <li>Parent 2</li>
</ol>

<!-- RIGHT -->
<ol>
    <li>Parent 1 
        <ol> 
            <li>Child</li>
        </ol>
    </li> <!-- Parent is Hugging the child -->
    <li>Parent 2</li>
</ol>