क्या आप सूची संख्याओं का आदेश दे सकते हैं?

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. के लिए कुछ लिंक codeitdown.com/ordered-list-css-styles 2. css-tricks.com/numbering-in-style इसका एक अच्छा qtn, लेकिन खोज के थोड़ा आप इस सवाल का जवाब मिल गया है हो सकता है

— crafter

@KingKing - मैं इसे तब डुप्लिकेट के रूप में चिह्नित करने का सुझाव दूंगा ...

— ली टेलर

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;Ol ब्लॉक में जाना चाहिए, अन्यथा काउंटर नेस्टेड <ol> में रीसेट नहीं किया जाएगा।

— माइकल क्लोपीजिग

एक अच्छा समाधान है, लेकिन जब liतत्व का शरीर एक से अधिक रेखाओं का होता है , तो कैसे प्रतिपादन किया जाता है?

— cmhughes

मुझे लगता है कि, जैसा कि stackoverflow.com/questions/13354578/… में , आप उदाहरण के लिए उपयोग कर सकते हैं `मार्जिन-लेफ्ट: -2.0em; चौड़ाई: -2.0em; `

— cmhughes

एक सर्कल प्राप्त करने के 50%लिए border-radius(बल्कि 100%) का एक मूल्य पर्याप्त है। (देखें, उदाहरण के लिए, ले वेरो, " बॉर्डर-त्रिज्या का जिज्ञासु मामला: 50% ," 30 अक्टूबर, 2010।)

— जिम रेटलिफ

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