How to set the list-item marker appear inside the content flow in CSS ?
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 –
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 –
