How to hide the bullets on list for the sidebar?
In this article we are going to learn How to hide the bullets on a list for the sidebar, To hide the bullets on a list for the sidebar, you can use CSS. Apply the list-style-type: none; property to the <ul>(unordered list) or <ol>(ordered list) element. This will remove the default bullet points. Additionally, you can set padding-left: 0; to remove any indentation. To further customize the appearance, you can apply your own styles, such as using custom icons or designing a different visual indicator for each list item.
The below example illustrates the approach:
Example: Here is the example of the above explanation.
html
<!DOCTYPE html>
< html >
< head >
< style >
h1 {
color: green;
}
ul#remove {
list-style-type: none;
padding: 0;
}
.left {
width: 40%;
float: left;
}
.right {
width: 40%;
float: right;
}
</ style >
</ head >
< body >
< center >
< h1 >GeeksforGeeks</ h1 >
< h2 >HTML bulletless list</ h2 >
</ center >
< div class = "left" >
< p >GeeksforGeeks courses List:</ p >
< ul >
< li >Geeks</ li >
< li >Sudo</ li >
< li >Gfg</ li >
< li >Gate</ li >
< li >Placement</ li >
</ ul >
</ div >
< div class = "right" >
< p >GeeksforGeeks courses List:</ p >
< ul id = "remove" >
< li >Geeks</ li >
< li >Sudo</ li >
< li >Gfg</ li >
< li >Gate</ li >
< li >Placement</ li >
</ ul >
</ body >
</ html >
|
Output:
Last Updated :
08 Jun, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...