How to hide the bullets on list for the sidebar?
Normally, when we create a list (ordered or unordered) list, it appears in the form of markers or bullets. Few times we donn’t want the bullets or any mark, we just want a simple list without bullets. To do so we can use pure CSS to remove those bullets from the list.
For this we use the CSS list-style-type Property. It specifies the appearance of the list item marker (such as a disc, character, or custom counter style) if ‘list-style-image’ has the value ‘none’. IF we set the none value it will not create the markers or the bullets for the lists. Also we’ll have to set the margin:0 and padding:0 as the lists have a default margin and padding.
Below example illustrate the approach:
- Example:
<!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><divclass="left"><p>GeeksforGeeks courses List:</p><ul><li>Geeks</li><li>Sudo</li><li>Gfg</li><li>Gate</li><li>Placement</li></ul></div><divclass="right"><p>GeeksforGeeks courses List:</p><ulid="remove"><li>Geeks</li><li>Sudo</li><li>Gfg</li><li>Gate</li><li>Placement</li></ul></body></html> - Output:
Please Login to comment...