![]() |
Definition and UsageThe Use the Tip: Use CSS to style lists. Tip: For ordered lists, use the <ol> tag. Browser SupportGlobal AttributesThe Event AttributesThe |
Example:
HTML
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
All the different list types for ul with CSS.
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>All the different list types for ul with CSS</h1>
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Modify lineheight of lists with CSS.
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>Modify lineheight of lists with CSS</h1>
<p>Expand line height in a list:</p>
<ul style="line-height:180%">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<p>Reduce line height in a list:</p>
<ul style="line-height:80%">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
A list inside another list.
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>A list inside another list</h1>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
A list in a list in a list.
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>A list in a list in a list</h1>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
A list in a list in a list..
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>A list in a list in a list</h1>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
Most browsers will display the <ul>
element with the following default values.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
ul {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
</style>
</head>
<body>
<p>A ul element is displayed like this:</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<p>Change the default CSS settings to see the effect.</p>
</body>
</html>
html ul |
Read Full: | HTML Tag |
Type: | Develop |
Category: | Web Tutorial |
Sub Category: | HTML Tag |
Uploaded: | 3 weeks ago |
Uploaded by: | Admin |
Views: | 44 |
Reffered: https://www.w3schools.com/tags/tag_ul.asp