In CSS, We can specify the position of list item markers in the lists by using list-style-position property. Let's create a webpage named liststyleposition.html
<!DOCTYPE html>
<head>
<style type="text/css">
ul .in {list-style-position:inside;border:5px dashed red;}
ul .out {list-style-position:outside;border:5px dashed red;}
</style>
</head>
<body>
<p>The list item shows items with position value inside.</p>
<ul class="in">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<p>The list item shows items with position value outside.</p>
<ul class="out">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</body>
</html>
The output of the Web page Is:
<!DOCTYPE html>
<head>
<style type="text/css">
ul .in {list-style-position:inside;border:5px dashed red;}
ul .out {list-style-position:outside;border:5px dashed red;}
</style>
</head>
<body>
<p>The list item shows items with position value inside.</p>
<ul class="in">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<p>The list item shows items with position value outside.</p>
<ul class="out">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</body>
</html>
The output of the Web page Is:
No comments:
Post a Comment