Loading Please Wait...
Unordered lists are defined by <ul> tag and each list item is defined by <li> tag.
By default each item is marked by bullet (small circle) but this can be change by CSS style.
<!DOCTYPE html>
<html>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</body>
</html>
We can define list item marker by list-style-type CSS property. The property have the following value
<!DOCTYPE html>
<html>
<body>
<ul style="list-style-type: disc;">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<ul style="list-style-type: circle;">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<ul style="list-style-type: square;">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<ul style="list-style-type: none;">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</body>
</html>
We can define nested list (lists inside another list).
<!DOCTYPE html>
<html>
<body>
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 2.1</li>
<li>Item 2.2</li>
</ul>
</li>
</ul>
</body>
</html>
HTML lists can be defined horizontally instead of vertically.
<!DOCTYPE html>
<html>
<body>
<ul style="list-style-type: none;">
<li style="float: left; margin: 10px;">Item 1</li>
<li style="float: left; margin: 10px;">Item 2</li>
<li style="float: left; margin: 10px;">Item 3</li>
<li style="float: left; margin: 10px;">Item 4</li>
</ul>
</body>
</html>
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved