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 –
Please Login to comment...