CSS list-style-position प्रॉपर्टी का उपयोग लिस्ट आइटम्स के मार्कर की स्थिति सेट करने के लिए किया जाता है। इस प्रॉपर्टी का डिफ़ॉल्ट मान outside है जो मार्कर को लिस्ट आइटम के बाहर सेट करता है।
सिंटैक्स
CSS list-style-position प्रॉपर्टी का सिंटैक्स निम्नानुसार है:
Selector { list-style-position: /*value*/ }
उदाहरण
निम्नलिखित उदाहरण CSS list-style-property को दर्शाते हैं:
<!DOCTYPE html> <html> <head> <style> li { width: 50%; margin: 5px; font-size: 120%; box-shadow: 0 0 3px 1px black; background: url("https://www.tutorialspoint.com/dbms/images/dbms.jpg") no-repeat 32px 8px; list-style-position: inside; padding: 0 0 10px 20px; } ol ol li { list-style: lower-roman; list-style-position: outside; } </style> </head> <body> <ol> <li>Black</li> <li> Blue <ol> <li>Green</li> <li>Red</li> </ol> </li> <li>Yellow</li> <li>Red</li> </ol> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट देता है:
दूसरा उदाहरण
<!DOCTYPE html> <html> <head> <style> ul { width: 200px; box-shadow: inset 0 0 6px green; list-style-position: outside; } ul + ul { list-style-type: circle; list-style-position: inside; } </style> </head> <body> <ul> <li>demo</li> <li>demo</li> <li>demo</li> </ul> <ul> <li>demo</li> <li>demo</li> <li>demo</li> </ul> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट देता है:
