CSS का उपयोग करके लिस्ट मार्कर्स की पोजिशन बदलना

list-style-position प्रॉपर्टी

list-style-position प्रॉपर्टी का उपयोग लिस्ट-आइटम मार्कर्स की पोजिशन सेट करने के लिए किया जाता है।

मान:

• outside: मार्कर कंटेंट बॉक्स के बाहर (डिफ़ॉल्ट) - टेक्स्ट अलाइन रहता है
• inside: मार्कर कंटेंट बॉक्स के अंदर - टेक्स्ट के साथ फ्लो करता है

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
ul.demo1 { list-style-position: outside; }
ul.demo2 { list-style-position: inside; }
</style>
</head>
<body>
<h1>टीमें</h1>
<h2>ODI टीमें (outside)</h2>
<ul class="demo1">
  <li>भारत</li> <li>ऑस्ट्रेलिया</li> <li>इंग्लैंड</li>
  <li>वेस्ट इंडीज</li> <li>दक्षिण अफ्रीका</li> <li>श्रीलंका</li>
</ul>
<h2>टेस्ट टीमें (inside)</h2>
<ul class="demo2">
  <li>भारत</li> <li>ऑस्ट्रेलिया</li> <li>इंग्लैंड</li>
  <li>वेस्ट इंडीज</li> <li>दक्षिण अफ्रीका</li> <li>श्रीलंका</li>
</ul>
</body>
</html>

आउटपुट

पहली लिस्ट (outside): मार्कर्स बाएं मार्जिन में, टेक्स्ट साफ अलाइन।
दूसरी लिस्ट (inside): मार्कर्स टेक्स्ट फ्लो में, रैप होने पर इंडेंटेड दिखते हैं।

दृश्य अंतर:

outside (डिफ़ॉल्ट):        inside:
  ● भारत                      ● भारत
  ● ऑस्ट्रेलिया                ● ऑस्ट्रेलिया
  ● इंग्लैंड                    ● इंग्लैंड
टेक्स्ट लंबवत अलाइन रहता है   रैप होने पर टेक्स्ट मार्कर के नीचे इंडेंट होता है

शॉर्टहैंड में उपयोग:

ul {
  list-style: square inside;   /* type position */
  /* या */
  list-style: url('icon.png') outside;
}

कब कौन सा उपयोग करें:

नेस्टेड लिस्ट्स उदाहरण:

ul {
  list-style-position: outside;
}
ul ul {
  list-style-type: circle;
  margin-left: 1.5em;
}