অর্ডার করা তালিকায় আপনি কীভাবে নম্বরগুলি কাস্টমাইজ করতে পারেন?

Question

অর্ডার করা তালিকায় আমি কীভাবে নম্বরগুলি বাম-সারিবদ্ধ করতে পারি?

1.  an item
// skip some items for brevity 
9.  another item
10. notice the 1 is under the 9, and the item contents also line up

অর্ডার করা তালিকার সংখ্যাটির পরে চরিত্রটি পরিবর্তন করবেন?

1) an item

এছাড়াও ওল উপাদানটিতে বৈশিষ্ট্য প্রকারটি ব্যবহার না করে সংখ্যা থেকে বর্ণমালা / রোমান তালিকাগুলিতে পরিবর্তনের জন্য সিএসএস সমাধান রয়েছে।

ফায়ারফক্স 3 এ কাজ করা উত্তরগুলিতে আমি বেশিরভাগ আগ্রহী।

Answer 1

ফায়ারফক্স 3, অপেরা এবং গুগল ক্রোমে আমি এই সমাধানটি কাজ করছি। তালিকাটি এখনও আই 7 তে প্রদর্শিত হয় (তবে বন্ধ বন্ধনী এবং বাম প্রান্তিককরণ নম্বর ছাড়াই):

ol {
  counter-reset: item;
  margin-left: 0;
  padding-left: 0;
}
li {
  display: block;
  margin-bottom: .5em;
  margin-left: 2em;
}
li::before {
  display: inline-block;
  content: counter(item) ") ";
  counter-increment: item;
  width: 2em;
  margin-left: -2em;
}

<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine<br>Items</li>
  <li>Ten<br>Items</li>
</ol>

সম্পাদনা: স্ট্র্যাজার দ্বারা একাধিক লাইন ফিক্স অন্তর্ভুক্ত

এছাড়াও ওল উপাদানটিতে বৈশিষ্ট্য প্রকারটি ব্যবহার না করে সংখ্যা থেকে বর্ণমালা / রোমান তালিকাগুলিতে পরিবর্তনের জন্য সিএসএস সমাধান রয়েছে।

পড়ুন তালিকা-শৈলী-টাইপ সিএসএস সম্পত্তি। বা কাউন্টার ব্যবহার করার সময় দ্বিতীয় যুক্তি একটি তালিকা-শৈলীর ধরণের মান গ্রহণ করে। উদাহরণস্বরূপ নীচেরগুলি উপরের রোমান ব্যবহার করবে:

li::before {
  content: counter(item, upper-roman) ") ";
  counter-increment: item;
/* ... */

Comments

নম্বরগুলি আবার যুক্ত করার দরকার ছিল, একটি বিশ্বব্যাপী শৈলী এগুলি মুছে ফেলছিল (কে জানেন যে আপনি কেন একটি ওল ব্যবহার করবেন এবং একটি উলের পরিবর্তে সংখ্যাগুলি সরিয়ে ফেলবেন ??)। সম্পূর্ণ ব্যাখ্যা এবং কোডের জন্য খুব স্পষ্ট উত্তর +1, সহজেই কিছু করতে সংশোধন করা যায়।

— মরভেল

আমি একটি ক্লিনার সিএসএস সুপারিশ মার্জিন / প্যাডিং তালিকা ওয়াইড থাকার সংখ্যায়ন সঙ্গে যে কাজ ভাল সমাধান: ol {counter-reset: item; padding-left: 0;} li {display: block; margin-bottom: .5em;} li:before {display: inline-block; content: counter(item) ") "; counter-increment: item; padding-right: 0.8em;}।

— এমএমজে

Answer 2

স্টাইলিং তালিকার জন্য সিএসএস এখানে তবে মূলত:

li {
    list-style-type: decimal;
    list-style-position: inside;
}

তবে, আপনি যে নির্দিষ্ট বিন্যাসের পরে যাচ্ছেন তা সম্ভবত এই জাতীয় কিছু দিয়ে বিন্যাসের আভ্যন্তরীণ অংশে ডিলিংয়ের মাধ্যমেই অর্জন করা যেতে পারে (নোট করুন যে আমি আসলে এটি চেষ্টা করি নি):

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

Comments

এটি সংখ্যাগুলিতে রেখাযুক্ত হয়, তবে পাঠ্য সামগ্রীটি নেই।

— grom

Answer 3

আপনি এইচটিএমএলে নিজের নম্বরগুলিও নির্দিষ্ট করতে পারেন - উদাহরণস্বরূপ যদি কোনও ডাটাবেসের মাধ্যমে নম্বরগুলি সরবরাহ করা থাকে:

ol {
  list-style: none;
}

ol>li:before {
  content: attr(seq) ". ";
}

<ol>
  <li seq="1">Item one</li>
  <li seq="20">Item twenty</li>
  <li seq="300">Item three hundred</li>
</ol>

seqঅ্যাট্রিবিউট একটি পদ্ধতি অন্যান্য উত্তর দেওয়া অনুরূপ ব্যবহার প্রোফাইল তৈরি করা হয়। পরিবর্তে ব্যবহারের পরিবর্তে content: counter(foo), আমরা ব্যবহার করি content: attr(seq)।

আরও স্টাইলিং সহ কোডপেনে ডেমো

Comments

আপনি যদি কেবলমাত্র valueবৈশিষ্ট্যটি ব্যবহার করেন তবে আপনি এটি সরল করতে পারেন <li>। যেমন <li value="20">। তাহলে আপনার কোনও ছদ্ম উপাদানগুলির দরকার নেই। ডেমো

— GWB

@ জিডব্লিউবি এটি বৈধ (এবং একটি ভাল সমাধান) থাকাকালীন, তালিকাটি সাধারণ হিসাবে এটি সংখ্যাগত মানগুলিতে সীমাবদ্ধ। যেমন, আপনি কিছু করতে পারবেন না value="4A", কারণ এটি কাজ করবে না। অতিরিক্তভাবে, মান বৈশিষ্ট্যটি বৈশিষ্ট্যটির সাথে কাজ typeকরতে পারে তবে মানটি এখনও একটি সংখ্যা (যেমন এটি একটি আদেশযুক্ত সেটের মধ্যে কাজ করে) হতে হবে।

— jedd.ahyoung

ধন্যবাদ - বিপরীত ক্রমে একটি তালিকা দেখানোর জন্য যখন ফ্লাইং সসারের প্রয়োজন ছিল তখন এটি আমার জন্য কাজ করেছিল ( reversedবৈশিষ্ট্যটি এইচটিএমএল 5 হ'ল, যেমনটি ব্যবহার valueকরছে li)। আপনার ব্যবহারের পরিবর্তে seqআমি একটি সেট করেছি valueএবং attr(value)তার পরিবর্তে ব্যবহার করেছিattr(seq)

— জয়গুবি

Answer 4

অন্যান্য উত্তর থেকে এটি অনেক চুরি করেছে, তবে এটি আমার জন্য এফএফ 3 এ কাজ করছে। এটা আছে upper-romanঅভিন্ন ইন্ডেন্টিং ঘনিষ্ঠ বন্ধনী।

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<style type="text/css">
<!--
ol {
  counter-reset: item;
  margin-left: 0;
  padding-left: 0;
}
li {
  margin-bottom: .5em;
}
li:before {
  display: inline-block;
  content: counter(item, upper-roman) ")";
  counter-increment: item;
  width: 3em;
}
-->
</style>
</head>

<body>
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine</li>
  <li>Ten</li>
</ol>
</body>
</html>

Answer 5

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

নীচের মতো কিছু, যা আইটেমগুলির সাথে স্থির করে দেয়। হ্যাঁ, আমি জানি যে প্রস্থটি নিজেই বেছে নেওয়ার পক্ষে এটি কম মার্জিত নয়, তবে আপনার লেআউটের জন্য সিএসএস ব্যবহার করা অন্তর্ভুক্ত পুলিশ কাজের মতো: তবে আপনার উদ্দেশ্য ভাল, এটি সর্বদা অগোছালো হয়ে যায়।

li:before {
  content: counter(item) ") ";
  counter-increment: item;
  display: marker;
  width: 2em;
}

তবে সঠিক সমাধানটি খুঁজতে আপনাকে পরীক্ষা করতে হবে।

Comments

আপনার একটি কাউন্টার-রিসেট দরকার: আইটেম; ব্লকের আগে

— গ্রেগ

Answer 6

আপনি তালিকাতে স্টাইল-টাইপ সেট করে সংখ্যায় শীর্ষস্থানীয়-জেরো যুক্ত করেন তবে সংখ্যাগুলি আরও ভাল হয়:

ol { list-style-type: decimal-leading-zero; }

Answer 7

এইচটিএমএল 5: valueবৈশিষ্ট্যটি ব্যবহার করুন (কোনও সিএসএসের প্রয়োজন নেই)

আধুনিক ব্রাউজারগুলি গুনটির বিশ্লেষণ করবে valueএবং আপনার প্রত্যাশা অনুযায়ী এটি প্রদর্শন করবে। MDN ডকুমেন্টেশন দেখুন ।

<ol>
  <li value="3">This is item three.</li>
  <li value="50">This is item fifty.</li>
  <li value="100">This is item one hundred.</li>
</ol>

এছাড়াও কটাক্ষপাত আছে MDN নিবন্ধ , বিশেষ করে প্রোগ্রামটির ডকুমেন্টেশন এবং এবং অ্যাট্রিবিউট।<ol>start

Answer 8

মার্কস ডাউনিংয়ের উত্তর ধার এবং উন্নত করা হয়েছে । ফায়ারফক্স 3 এবং অপেরা 9-তে পরীক্ষিত এবং কাজ করে multiple একাধিক লাইনও সমর্থন করে।

ol {
    counter-reset: item;
    margin-left: 0;
    padding-left: 0;
}

li {
    display: block;
    margin-left: 3.5em;          /* Change with margin-left on li:before.  Must be -li:before::margin-left + li:before::padding-right.  (Causes indention for other lines.) */
}

li:before {
    content: counter(item) ")";  /* Change 'item' to 'item, upper-roman' or 'item, lower-roman' for upper- and lower-case roman, respectively. */
    counter-increment: item;
    display: inline-block;
    text-align: right;
    width: 3em;                  /* Must be the maximum width of your list's numbers, including the ')', for compatability (in case you use a fixed-width font, for example).  Will have to beef up if using roman. */
    padding-right: 0.5em;
    margin-left: -3.5em;         /* See li comments. */
}

Comments

এছাড়াও আপনি পাঠ্য-প্রান্তিককরণ চান: বাম; ঠিক না এবং শেষ লাইনটি মার্জিন-বামে হওয়া উচিত: -3.5 মিমি;

— grom

@ গ্রোম, তাদের সংশোধনের জন্য ধন্যবাদ। এছাড়াও, অপেরা রেন্ডারগুলি ডিফল্টরূপে ডান-প্রান্তিককরণের তালিকা দেয়, তাই আমি এই আচরণটি নকল করেছি।

— স্ট্র্যাজার

@ ক্রোম, ফায়ারফক্স ইস্যুটি হ'ল ... ফায়ারফক্স লী: সিউডোলেমেন্টের পূর্বে ভাসা ছাড়াই নিজের লাইনে রাখে, এমনকি এটি প্রদর্শিত হলেও: ইনলাইন-ব্লক।

— স্ট্র্যাজার

@ স্ট্রেজার, আচ্ছা আমি লিনাক্সে 3.0.০.৪ এবং উইন্ডোজে 3.0.০.৩ ব্যবহার করছি এবং এটি আমার পক্ষে ভাসা ছাড়াই কাজ করে: বাম; নিয়ম.

— grom

@ গ্রোম, হুম, আকর্ষণীয়। আমি কেবল নিজেকে পরীক্ষা করেছি এবং এটি ভাসা ছাড়াই কাজ করে। আমি ভুল টাইপ করেছি।

— স্ট্র্যাজার

Answer 9

নেই প্রকার অ্যাট্রিবিউট আপনি সংখ্যায়ন শৈলী পরিবর্তন করতে, কিন্তু, আপনি নম্বর / চিঠি পর দাড়ি পরিবর্তন করতে পারবেন না পারেন।

<ol type="a">
    <li>Turn left on Maple Street</li>
    <li>Turn right on Clover Court</li>
</ol>

Comments

এই উত্তরের মার্কআপটি ঠিক করা দরকার। ছোট হাতের অক্ষর ব্যবহার করুন এবং "উদ্ধৃতিগুলিতে" বৈশিষ্ট্য মানগুলি বন্ধ করুন।

— dylanfm

এবং আপনার উপাদানগুলি বন্ধ করুন: <li> ... </ li>

— dylanfm

@ অ্যালানফএম - আপনি জানেন যে উপস্থাপিত মার্কআপ সঠিক, 100% বৈধ এইচটিএমএল, হ্যাঁ? এক্সএইচটিএমএল না অনুরোধ করা না হলে লোককে এক্সএইচটিএমএল না ব্যবহারের জন্য নিম্নোক্ত করবেন না।

— বেন ফাঁকা

আমি তোমাকে উড়িয়ে দেইনি এবং হ্যাঁ, এটি সত্য আবার। এইচটিএমএল। আমি স্রেফ একটি মানসম্পন্ন পিক ব্যক্তি ছিলাম।

— dylanfm

অবৈধ এইচটিএমএল পোস্ট করার জন্য আমার ক্ষমা চাই। আমি একটি ওয়েবসাইট থেকে কোডটি অনুলিপি করেছি এবং এটি সংশোধন করার কথা ভাবি নি। আমি এখন লজ্জা বোধ করছি :(

— গেটকিলার

Answer 10

দস্তাবেজগুলি সম্পর্কে বলে list-style-position: outside

সিএসএস 1 মার্কার বক্সের সঠিক অবস্থানটি নির্দিষ্ট করে নি এবং উপযুক্ততার কারণে সিএসএস 2 সমান অস্পষ্ট থাকে। মার্কার বাক্সগুলির আরও সঠিক নিয়ন্ত্রণের জন্য, দয়া করে চিহ্নিতকারী ব্যবহার করুন।

পৃষ্ঠার আরও উপরে চিহ্নিতকরণ সম্পর্কিত জিনিস।

একটি উদাহরণ হ'ল:

       LI:before { 
           display: marker;
           content: "(" counter(counter) ")";
           counter-increment: counter;
           width: 6em;
           text-align: center;
       }

Comments

চিহ্নিতকারীদের জন্য সমস্ত উদাহরণ ( w3.org/TR/CSS2/generate.html#q11 দেখুন ) আমার পক্ষে কাজ করে না।

— grom

Answer 11

নাহ ... কেবল একটি ডিএল ব্যবহার করুন:

dl { overflow:hidden; }
dt {
 float:left;
 clear: left;
 width:4em; /* adjust the width; make sure the total of both is 100% */
 text-align: right
}
dd {
 float:left;
 width:50%; /* adjust the width; make sure the total of both is 100% */
 margin: 0 0.5em;
}

Answer 12

আমার এটা আছে. নিম্নলিখিত চেষ্টা করুন:

<html>
<head>
<style type='text/css'>

    ol { counter-reset: item; }

    li { display: block; }

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

</style>
</head>
<body>
<ol>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
</ol>
</body>

ক্যাচটি হ'ল এটি অবশ্যই পুরানো বা কম অনুপযুক্ত ব্রাউজারগুলিতে কাজ করবে না: display: inline-blockএটি একটি খুব নতুন সম্পত্তি।

Answer 13

দ্রুত এবং ময়লা বিকল্প সমাধান। আপনি পূর্বনির্দিষ্ট পাঠ্যের পাশাপাশি একটি সারণী অক্ষর ব্যবহার করতে পারেন। এখানে একটি সম্ভাবনা রয়েছে:

<style type="text/css">
ol {
    list-style-position: inside;
}
li:first-letter {
    white-space: pre;
}
</style>

এবং আপনার এইচটিএমএল:

<ol>
<li>    an item</li>
<li>    another item</li>
...
</ol>

নোট করুন যে liট্যাগ এবং পাঠ্যের ভিক্ষার মধ্যে স্থানটি একটি সারণী চরিত্র (নোটপ্যাডের ভিতরে ট্যাব কী টিপলে আপনি কী পাবেন)।

আপনার যদি পুরানো ব্রাউজারগুলি সমর্থন করতে হয় তবে আপনি এটি পরিবর্তে এটি করতে পারেন:

<style type="text/css">
ol {
    list-style-position: inside;
}
</style>

<ol>
    <li><pre>   </pre>an item</li>
    <li><pre>   </pre>another item</li>
    ...
</ol>

Answer 14

অন্যান্য উত্তরগুলি ধারণাগত দৃষ্টিকোণ থেকে ভাল। তবে, আপনি '& ensp;' এর উপযুক্ত সংখ্যার সাথে কেবল সংখ্যাগুলি বাম-প্যাড করতে পারেন; তাদের লাইন আপ করা।

* দ্রষ্টব্য: আমি প্রথমে স্বীকৃতি জানাতে পারি নি যে একটি নম্বরযুক্ত তালিকা ব্যবহার করা হচ্ছে। আমি ভেবেছিলাম তালিকাটি স্পষ্টভাবে তৈরি করা হচ্ছে।

Answer 15

আমি এখানে সাধারণত যে ধরণের উত্তর পড়তে পছন্দ করি তা এখানে দেব, তবে আমি মনে করি যে অন্যান্য উত্তরগুলি কীভাবে আপনি চান তা কীভাবে অর্জন করবেন তা বলার অপেক্ষা রাখে না, আপনি যা অর্জন করতে চাইছেন তা যদি সত্যই হয় তবে তা পুনর্বিবেচনা করা ভাল হবে একটি ভাল ধারনা.

প্রথমত, আপনার ভাবনা উচিত আইটেমগুলিকে একটি মানহীন উপায়ে সরবরাহ করা থেকে পৃথক পৃথক চর্যাপদ সহ প্রদর্শন করা ভাল ধারণা কিনা।

আমি এর কারণগুলি জানি না, তবে ধরা যাক আপনার ভাল কারণ রয়েছে।

আপনার মার্কআপে সামগ্রী যুক্ত করার জন্য যেভাবে অর্জন করতে এখানে প্রস্তাবিত উপায়গুলি মূলত সিএসএসের গর্ত: সিউডোক্লাসের আগে। এই বিষয়বস্তুটি সত্যই আপনার ডোম কাঠামোটিকে সংশোধন করছে, সেই আইটেমগুলিতে এটি যুক্ত করছে।

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

সম্ভবত অন্য পদ্ধতির চিত্রগুলি ব্যবহার করে সংখ্যাগুলি স্টাইল করা হতে পারে, যদিও এই বিকল্পটি তার নিজস্ব সমস্যা নিয়ে আসবে (চিত্রগুলি অক্ষম করা অবস্থায় প্রদর্শিত হবে না, সংখ্যার জন্য পাঠ্যের আকার পরিবর্তন হচ্ছে না ...)।

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

Answer 16

এই কোডটি লি কন্টেন্টের শিরোনামের মতো সংখ্যায়ন শৈলী তৈরি করে।

<style>
    h4 {font-size: 18px}
    ol.list-h4 {counter-reset: item; padding-left:27px}
    ol.list-h4 > li {display: block}
    ol.list-h4 > li::before {display: block; position:absolute;  left:16px;  top:auto; content: counter(item)"."; counter-increment: item; font-size: 18px}
    ol.list-h4 > li > h4 {padding-top:3px}
</style>

<ol class="list-h4">
    <li>
        <h4>...</h4>
        <p>...</p> 
    </li>
    <li>...</li>
</ol>