Create an unordered list without any bullets using CSS
There are basically three different types of lists provided by HTML:
- Ordered List
- Unordered List
- Description list
There are several ways to design these three types of lists with CSS. It could be numeric, round, square, alphanumeric or maybe even non-existent. It can also make a choice whether to align a list horizontally or vertically with the help of CSS.
The task of this article is to create an unordered list without any bullets using CSS.
Example 1:
html
<!DOCTYPE html><html> <head> <title>Unordered list without using bullets</title> <style> ul { list-style-type:none; } h1 { text-align:center; color:green; } h3 { text-align:center; } body { width:60%; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h3>Unordered list without using bullets</h3> <p>Computer science subject lists:</p> <ul> <li>Data Structure</li> <li>Algorithm</li> <li>Computer Networks</li> <li>Operating System</li> <li>Theory of Computations</li> <li>Computer Organization and Architecture</li> <li>Discrete Mathematics</li> <li>C Programming</li> </ul> </body></html> |
Output:
Example 2:
html
<!DOCTYPE html><html> <head> <title>Unordered list without using bullets</title> <style> ul { list-style-type:none; } ul li { display:inline; } h1 { text-align:center; color:green; } h3 { text-align:center; } body { width:70%; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h3>Unordered list without using bullets</h3> <p>Computer science subject lists:</p> <ul> <li>Data Structure</li> <li>Algorithm</li> <li>Computer Networks</li> <li>Operating System</li> <li>Theory of Computations</li> <li>Computer Organization and Architecture</li> <li>Discrete Mathematics</li> <li>C Programming</li> </ul> </body></html> |
Output:
Please Login to comment...