আপনি তালিকাভুক্ত তালিকা নম্বর শৈলী করতে পারেন?

Question

আমি একটি আদেশযুক্ত তালিকায় নম্বরগুলি স্টাইল করার চেষ্টা করছি, আমি ব্যাকগ্রাউন্ড-রঙ, সীমানা-ব্যাসার্ধ এবং রঙ যুক্ত করতে চাই যাতে তারা যে নকশায় কাজ করছি তার সাথে মেলে:

আমার ধারণা এটি সম্ভব নয় এবং আমাকে প্রতিটি সংখ্যার জন্য আলাদা চিত্র ব্যবহার করতে হবে

ol li:first-child {list-style-image:url('1.gif')};
ol li:nth-child(2) {list-style-image:url('2.gif');} 
etc...

এর চেয়ে সহজ সমাধান কি আছে?

Comments

আপনি এখানে আমার ডেমো থেকে সমাধানের জন্য গবেষণা করতে পারেন jsfiddle.net/viphalongpro/Hj8Nn BTW, আমি মনে করি না এটি অনুসন্ধান করা অসম্ভব , প্রথমে অনুসন্ধান করা আপনাকে প্রচুর ফলাফল দিতে পারে , ঠিক তাই, এই ধরণের প্রশ্নটি হয়েছে অনেক বার জিজ্ঞাসা।

— কিং কিং

তথ্যের জন্য কয়েকটি লিঙ্কগুলি 1. কোডিটডাউনডর্ডারডলিস্টলিস্টিএসএসএস স্টাইলস 2. সিএসএস- ট্রিক্সস / নাম্বারিং- ইন- স্টাইল এটি একটি ভাল Qtn, তবে সামান্য কিছুটা অনুসন্ধান আপনাকে উত্তরটি পেয়েছে

— ক্র্যাটার

কিংকিং - আমি তখন এটির সদৃশ হিসাবে চিহ্নিত করার পরামর্শ দেব ...

— লি টেলর

Answer 1

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

 ol {
   list-style: none;
   counter-reset: item;
 }
 li {
   counter-increment: item;
   margin-bottom: 5px;
 }
 li:before {
   margin-right: 10px;
   content: counter(item);
   background: lightblue;
   border-radius: 100%;
   color: white;
   width: 1.2em;
   text-align: center;
   display: inline-block;
 }

<ol>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>

Comments

counter-reset: item;ওল ব্লকে যেতে হবে, অন্যথায় কাউন্টার নেস্টেড <ওল> পুনঃসেট হবে না।

— মাইকেল Klöpzig

একটি দুর্দান্ত সমাধান, কিন্তু যখন liউপাদানটির দেহ এক রেখার বেশি হয় তখন কীভাবে উপস্থাপনা হয়?

— সেমিউজেস

আমি মনে করি, হিসাবে stackoverflow.com/questions/13354578/... , আপনি উদাহরণস্বরূপ ব্যবহার করতে পারেন `মার্জিন-বাম: -2.0em; প্রস্থ: -2.0 মিমি; `

— সেমিঘুজে

একটি মান 50%জন্য border-radius(বদলে 100%) একটি বৃত্ত দেখতে পেতে পারেন যথেষ্ট। (উদাহরণস্বরূপ, লেয়া ভেরু, " সীমানা ব্যাসার্ধের কৌতূহল কেস: 50% ," 30 অক্টোবর, ২০১০.)

— জিম র্যাটলিফ

@cmhughes - আপনি যে কাজ করতে চেয়েছিলেন, আপনাকে দিতে চাই li position: relative;, এবং তারপর জন্য :beforeআপনি যে দিতে চাই position: absolute;এবং তারপর ব্যবহার topএবং leftআপনার মত যেমন ঠিক জায়গায় স্থাপনের জন্য।

— মাইকে

Answer 2

আমি আলাদা কিছু সন্ধান করছিলাম, এবং কোডপেনে এই উদাহরণটি পেয়েছি;

এটি ব্যবহার করে দেখুন: http://codepen.io/sawmac/pen/txBhK

body {
  font-size: 1.2em;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  margin: 50px;
}
.custom-counter {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.custom-counter li {
  counter-increment: step-counter;
  margin-bottom: 5px;
}
.custom-counter li::before {
  content: counter(step-counter);
  margin-right: 20px;
  font-size: 80%;
  background-color: rgb(180, 180, 180);
  color: white;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 11px;
}

<ol class="custom-counter">
  <li>This is the first item</li>
  <li>This is the second item</li>
  <li>This is the third item</li>
  <li>This is the fourth item</li>
  <li>This is the fifth item</li>
  <li>This is the sixth item</li>
</ol>