অর্ডার করা তালিকার উত্পাদনের ফলাফল যা CSS এর সাথে 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 উত্পাদন করেছে।

Comments

আমি জাকুব জিরুতকার দ্বারা গৃহীত উত্তরটির সাথে তুলনা করার পরামর্শ দেব। আমার মনে হয় উত্তরোত্তরটি আরও অনেক ভাল।

— ফ্রাঙ্ক কনিজন

মার্জিত সমাধান। কোনও ধারণা কেন উইকিপিডিয়া এর পরিবর্তে এর বিষয়বস্তু বিভাগগুলির জন্য একটি উল ব্যবহার করে?

— ম্যাটিপ্যান্টস

@ ডাবনিকুইল আমি সম্মত; দেখে মনে হচ্ছে আমি সম্ভবত সেপ্টেম্বরে ডুপ্লিকেটটি ভুল অর্ডারটিতে ফিরে এসেছি।

— টাইলারএইচ

শীতল, এখন আমি বিব্রত বোধ করছি কারণ এটি আমার কাছে কখনও ঘটে নি কারণ এটি এর মতো সাধারণ ত্রুটি হতে পারে - দুঃখিত!

— 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 পর্যন্ত সমর্থিত নয় ।

— গম্বো

এই সমাধানটি একটি ক্ষুদ্র জিনিস মিস করে: আইটেম নম্বর অনুসরণ করে বিন্দু। এটি স্ট্যান্ডার্ড তালিকার শৈলীর মতো দেখাচ্ছে না। বিধিটিতে একটি বিন্দু যুক্ত করে ঠিক করুন li:before: content: counters(item, ".")". ";

— এলএস

এটি একটি খারাপ উত্তর। এটি সঠিকভাবে কাজ করে না। নীচে জাকুব জিরুতকার উত্তরটি দেখুন

— মিঃ পাবলো

@ গম্বো আমি জানি, এবং জাকুবের উত্তর আমাকে সঠিক নম্বর দিয়েছে।

— মিঃ পাবলো

Answer 2

এই পৃষ্ঠার কোনও সমাধানই সমস্ত স্তরের এবং দীর্ঘ (মোড়ানো) অনুচ্ছেদের জন্য সঠিক এবং সর্বজনীনভাবে কাজ করে না। চিহ্নিতকরণের পরিবর্তনশীল আকারের কারণে (1., 1.2, 1.10, 1.10.5,…) কারণে একটি সামঞ্জস্যপূর্ণ ইন্ডেন্টেশন অর্জন করা সত্যই জটিল; এটি কেবল "নকল" হতে পারে না, এমনকি প্রতিটি সম্ভাব্য ইনডেন্টেশন স্তরের জন্য প্রাক্পম্পিউটেড মার্জিন / প্যাডিংয়ের সাথেও নয়।

আমি অবশেষে এমন একটি সমাধান বের করেছিলাম যা আসলে কাজ করে এবং কোনও জাভাস্ক্রিপ্টের প্রয়োজন নেই।

এটি ফায়ারফক্স 32, ক্রোমিয়াম 37, আই 9 এবং অ্যান্ড্রয়েড ব্রাউজারে পরীক্ষিত। আইই 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

এই ধরণের ইন্ডেনশন অর্জন করা ভাল কাজ। আমি তবুও তর্ক করব যে আপনি তালিকাভুক্ত প্রথম দুটি ক্ষেত্রে ইন্ডেন্টেশন সঠিক এবং ভুলের চেয়ে পছন্দসই বিষয়। কেস 1 এবং কেস 2 বিবেচনা করুন - স্পেসিংটি স্বাস্থ্যকর হওয়ার আগেও পরে আরও অনেকগুলি স্তরে কসরত করতে সক্ষম হয়, যদিও এখনও বেশ ঝরঝরে দেখছেন looking তদ্ব্যতীত, এমএস ওয়ার্ড এবং ডিফল্ট ব্রাউজার স্টাইলিং ক্ষেত্রে কেস 2 ইনডেন্টেশন ব্যবহার করে। আমার ধারণা তারা কি ভুল করছে?

— শৌল ফাউটলে

@ সল-ফাউটলি টাইপোগ্রাফির ক্ষেত্রে এটি ভুল। নেস্টেড স্তরের পাগল সংখ্যার সাথে আপনার উদাহরণটি প্রমাণ করে যে নেস্টেড সংখ্যাগুলি অনেক স্তরের জন্য উপযুক্ত নয় তবে এটি বেশ সুস্পষ্ট। এমএস ওয়ার্ডস কোনও টাইপসেটিং সিস্টেম নয়, এটি নিছক টাইপোগ্রাফির সাথে নিছক ডকুমেন্ট প্রসেসর। ডিফল্ট ব্রাউজার স্টাইলিং… ওহ, আপনি টাইপোগ্রাফি সম্পর্কে বেশি জানেন না, তাই না?

— জাকুব জিরুতকা

এটি সত্যই সমস্ত স্তরের এবং দীর্ঘ অনুচ্ছেদের জন্য (প্রযুক্তিগতভাবে) কাজ করে। যদি এটি ডজন স্তর ব্যবহার করা যুক্তিসঙ্গত হয়, তবে এটি আরও একটি প্রশ্ন যাটির প্রযুক্তিগত সমাধানের সাথে কোনও সম্পর্ক নেই। মুল বক্তব্যটি হ'ল আপনাকে অন্য কিছু সমাধানের মতো প্রতিটি নেস্টিং স্তরের জন্য কোনও সিএসএস নিয়মকে পূর্বনির্ধারিত করতে হবে না।

— জাকুব জিরুতকা 30'15

যদিও আমি অন্য উত্তরগুলির সহজাতভাবে "ভুল" কিছু বলব না, তবে আমি বলব যে সেগুলি অসম্পূর্ণ। এই উত্তরটি স্পট রয়েছে এবং এমনকি আমি সংশোধন করছি এমন ভয়াবহভাবে উদ্ভট স্টাইলের সাইটেও কাজ করেছেন।

— ড্যানিয়েলএম

@ ট্রিম্বি: "ডিসপ্লে: টেবিল" এর পরিবর্তে লি ব্যবহারটিকে "প্রদর্শন: টেবিল-সারি" তৈরি করে এই তাত্পর্যটি সমাধান করা যেতে পারে। সমস্যাটি এনে দেয় যে লি তখন কোনও মার্জিন / প্যাডিংস ব্যবহার করতে পারে না কারণ টেবিল-সারিগুলি সর্বদা তাদের সামগ্রী দ্বারা স্বয়ংক্রিয়ভাবে আকারযুক্ত হয়। এটি "ডিসপ্লে: ব্লক" সহ "লি: পরে" যুক্ত করে কাজ করা যেতে পারে। পূর্ণ উদাহরণের জন্য jsFizz দেখুন । অতিরিক্ত বোনাস হিসাবে আমি সংখ্যার ডান সারিবদ্ধ করতে "পাঠ্য-প্রান্তিককরণ: ডান" থেকে "লি: পূর্বে" যুক্ত করেছি।

— এমএমএলআর

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 */
}

জেএসফিডাল: http://jsfiddle.net/3J4Bu/

Comments

একটি খারাপ দিক এটি হ'ল প্রতিটি তালিকা আইটেমের শেষে একটি সময়কাল যুক্ত করে।

— ডেভিন স্টাডার

@ ডেভিন স্টাডার: এটি প্রতিটি সংখ্যার শেষের দিকে ডিফল্ট olআচরণ অনুসারে কেবল একটি সময়সীমা যুক্ত করে। সম্পত্তি "."থেকে শেষটি মুছে ফেলাতে এটি সহজেই সরানো যেতে পারে contentতবে এটি আমার কাছে কিছুটা বিশ্রী দেখায়।

— শৌল ফাউটলি

Answer 4

এখানে পোস্ট করা সমাধানগুলি আমার পক্ষে ভাল কাজ করে না, তাই আমি এই প্রশ্নের এবং নিম্নলিখিত প্রশ্নের একটি মিশ্রণ করেছি: এইচটিএমএল এ মাল্টি-লেভেল অর্ডারযুক্ত তালিকা তৈরি করা সম্ভব?

/* 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 ব্যবহার করুন । গৃহীত উত্তর দেখুন। নিম্নলিখিতটি কেবল historicalতিহাসিক স্বার্থের জন্য।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।

— কেনেটিম

আমার বক্তব্যটি হ'ল আপনি হার্ড-কোডড "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

আমার দুটি সমস্যা আছে যখন দুটি তালিকা রয়েছে এবং দ্বিতীয়টি ডিআইভির মধ্যে রয়েছে দ্বিতীয় তালিকার শুরুটি 1. থেকে শুরু করা উচিত 2.1 নয়

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

আপনি বিষয়টিতে স্ম্যাশিংমাগাজিন করে এই দুর্দান্ত নিবন্ধটিও চেক করতে চাইতে পারেন ।

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>

এইচটিএমএল ফাইলে।

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