এইচটিএমএল অর্ডার করা তালিকা 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

আমার কোন ক্লু নেই, কেউ কি দেখেন কোথায় ভুল হয়ে গেছে?

এখানে একটি জেএসফিডাল: 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

@ ওকোমিকেরুকো "সিএসএস নির্বাচকদের ঠিক করা" এর অর্থ কী? যেহেতু আপনি ঠিক তেমনই সমস্যাটি চালিয়ে যাচ্ছেন যা আপনি চিহ্নিত করেছেন - এই কৌশলটি কেবল সংখ্যার তালিকাকেই প্রভাবিত করছে না আমি এটির জন্য ব্যবহার করতে চাই তবে আমার এইচটিএমএলের অন্যান্য তালিকাও। : - \ কিছুই নয়: মোশে সিমন্তভের উত্তর এটি ঠিক করে দেয়। :)

— antred

@ যুক্ত উপাদানগুলির বৈশিষ্ট্যগুলি পছন্দ করে idএবং classআপনাকে সিলেক্টরগুলির সাথে সেই উপাদানগুলির জন্য নির্দিষ্ট সিএসএস সংজ্ঞায়িত করতে দেয়। আপনি একটি কম্বল ব্যবহার করেন তাহলে li, ul, olইত্যাদি, তারপর সিএসএস এটা সমস্ত উদাহরণ প্রভাবিত করে। তবে আপনি যদি নিজের উপাদানটি <ol class="cleared">এবং আপনার সিএসএস নির্বাচককে সেট করে থাকেন 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

দুর্দান্ত! আমার জন্য বাক্সের বাইরে কাজ করা! টোদা।

— yO_

এটি সর্বোত্তম উত্তর কারণ এটিতে একটি পয়েন্ট সহ প্রথম স্তর রয়েছে এবং সামগ্রীটি ইনসেট করে।

— মার্টিন একলবেন

যদি আমি যোগ font-weight: boldকরতে ol ol > li:beforeনেস্টেড তালিকা এর কাউন্টারে হয় boldকিন্তু এটি প্রথম স্তরের তালিকার কাউন্টারে দেখা যায় না bold?

— সুস্মিত সাগর

Answer 3

এটা দেখ :

http://jsfiddle.net/PTbGc/

আপনার সমস্যাটি স্থির হয়ে গেছে বলে মনে হচ্ছে।

---

আমার জন্য কী দেখায় (ক্রোম এবং ম্যাক ওএস এক্স এর অধীনে)

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;}

এটির সাহায্যে এইচটিএমএল পার্সার সমস্ত আইটেমিকে তালিকার আইটেম হিসাবে দেখেন এবং তার যথাযথ মান নির্ধারণ করে এবং আপনার সেটিংসের উপর ভিত্তি করে একটি ওলাইনটিকে একটি ইনলাইন-ব্লক বা ব্লক উপাদান হিসাবে দেখেন এবং কোনও গণনা মান নির্ধারণের চেষ্টা করেন না এটা।

Comments

এটি নম্বরটি সদৃশ করে।

— টাইলারএইচ

Answer 6

মোশির সমাধানটি দুর্দান্ত তবে সমস্যাটি এখনও উপস্থিত থাকতে পারে যদি আপনার তালিকাটি একটি এর ভিতরে রাখার দরকার হয় div। (পড়ুন: নেস্টেড তালিকার CSS-রিসেট রিসেট )

এই শৈলীটি এই সমস্যাটিকে আটকাতে পারে:

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;
}

SASS

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>