We learn to create a horizontal list by using the list-style-type property. let's create a web page named horizontallist.html to create a horizontal list.
<!doctype html>
<head>
<style type="text/css">
ul{color:red;
margin:0;
padding:0;
list-style-type:none;}
ul li{display:inline;}
body{background-color:lightseagreen;}
</style>
</head>
<body>
<img src="food product.jpg">
<ul>
<li><a href="#">milk</a></li>
<li><a href="#">eggs</a></li>
<li><a href="#">cheese</a></li>
<li><a href="#">Non Veg</a></li>
<li><a href="#">Fruit</a></li>
<ul>
</body>
</html>
An ordered list is created by specifying its list-style-type property as none. Then the li element of this unordered list are set in the inline style by using the display property.
The output of the above Webpage:
<!doctype html>
<head>
<style type="text/css">
ul{color:red;
margin:0;
padding:0;
list-style-type:none;}
ul li{display:inline;}
body{background-color:lightseagreen;}
</style>
</head>
<body>
<img src="food product.jpg">
<ul>
<li><a href="#">milk</a></li>
<li><a href="#">eggs</a></li>
<li><a href="#">cheese</a></li>
<li><a href="#">Non Veg</a></li>
<li><a href="#">Fruit</a></li>
<ul>
</body>
</html>
An ordered list is created by specifying its list-style-type property as none. Then the li element of this unordered list are set in the inline style by using the display property.
The output of the above Webpage:
No comments:
Post a Comment