The task is to set the list-item marker to appear inside the content flow in CSS. To specify the type of list item marker you can use the list-style-type and list-style-position property. Content flow is the set of rules that defines which element comes before another one, which one sits on top of another one etc.
- list-style-type: It is used to specify the type of list-item marker in a list.
- list-style-position: It is used to specify the position of the list-item markers.
Syntax –
list-style-position: value;
Where value is –
- inside – The bullet points will be inside the list item.
- outside(default) – The bullet points will be outside the list item.
- initial – Sets this property to its default value.
- inherit – Inherits this property from its parent element.
Approach –
- Create the HTML file with the list element.
- Using list-style-position property to set the list-item marker to appear inside the content flow.
Example: In this example, we are using the above-explained approach.
HTML
<!DOCTYPE html><html>
<head>
<style type="text/css">
body {
font-size: 20px;
text-align: center;
}
ul.x {
list-style-position: inside;
background-color: lightgreen;
list-style-type: square;
}
ul.y {
list-style-position: outside;
list-style-type: square;
background-color: lightgreen;
}
</style>
</head>
<body>
<h1 style="color:green">GeeksForGeeks</h1>
<p>List-style-position: inside</p>
<ul class="x">
<li>Database</li>
<li>Computer Network</li>
<li>Operating System</li>
</ul>
<p>List-style-position: outside</p>
<ul class="y">
<li>Database</li>
<li>Computer Network</li>
<li>Operating System</li>
</ul>
</body>
</html>
|
Output :