CSS सूची-शैली-स्थिति गुण का उपयोग सूची वस्तुओं की मार्कर स्थिति निर्धारित करने के लिए किया जाता है। इस संपत्ति के लिए डिफ़ॉल्ट मान बाहर है जो सूची आइटम के बाहर मार्कर सेट करता है।
सिंटैक्स
CSS सूची-शैली-स्थिति गुण का सिंटैक्स इस प्रकार है -
Selector {
list-style-position: /*value*/
} उदाहरण
निम्नलिखित उदाहरण CSS सूची-शैली-संपत्ति को दर्शाते हैं -
<!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> आउटपुट
यह निम्न आउटपुट देता है -
