. Advertisement .
..3..
. Advertisement .
..4..
By default, both <ul> and <ol> lists are rendered vertically. However, you can change this orientation with some added styles. Let’s learn how to make a HTML list appear horizontally and its applications.
Make A HTML List Appear Horizontally
To put the elements of an HTML list <ol> or <ul> side by side instead of on top of each other, you will need to alter the display CSS property. The value of each <li> element should be changed to inline.
Example:
<body>
<h2>Sample Product</h2>
<ul>
<li style="display: inline">HOME</li>
<li style="display: inline">PRIVACY POLICY</li>
<li style="display: inline">ABOUT</li>
<li style="display: inline">CONTACT</li>
</ul>
</body>Your list will look like this:
......... ADVERTISEMENT .........
..8..
Instead of this:
......... ADVERTISEMENT .........
..8..
How does it work? The default display value of <li> elements in browsers is list-item. For <li> elements, it creates block boxes to contain the content and renders them vertically.
When assigned the inline value, the display property is changed from block to inline layout.
In this formatting context, the boxes containing the <li> elements are laid out in a horizontal line after each other within a rectangular area called the line box. As long as there is space left, each box doesn’t add any line break after or before it.
The browser will respect the horizontal padding, borders, and margins between them.
You can separate the HTML and CSS codes to make them more readable and easier to maintain.
HTML:
<body>
<h2>Sample Product</h2>
<ul class="nav">
<li>HOME</li>
<li>PRIVACY POLICY</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</body>CSS:
ul.nav > li {
display: inline-block;
}
Format Your Horizontal Lists
Navigation bars are the most popular application of horizontal lists in HTML. Here is a basic example.
HTML:
<html>
<head>
<link rel="stylesheet" href="demo.css">
</head>
<h2 class="title">Sample Product</h2>
<ul class="nav">
<li><a href="./home">HOME</a></li>
<li><a href="./privacypolicy">PRIVACY POLICY</a></li>
<li><a href="./about">ABOUT</a></li>
<li><a href="./contact">CONTACT</a></li>CSS:
.title {
text-align: center;
}
ul.nav {
list-style-type: none;
background-color: rgb(101, 46, 252);
text-align: center;
margin: 0;
padding: 0;
overflow: hidden;
}
ul.nav > li {
display: inline;
}
a {
float: center;
color: #ffffff;
text-decoration: none;
text-align: center;
text-decoration: none;
padding: 25px;
font-size: 20px;
}Your list now looks like this:
......... ADVERTISEMENT .........
..8..
It can become even prettier and look like a modern website:
......... ADVERTISEMENT .........
..8..
The CSS style that makes it possible:
.title {
text-align: center;
}
ul.nav {
list-style-type: none;
margin: 1;
padding: 1;
text-align: center;
overflow: hidden;
background-color: #421e1e;
}
ul.nav > li {
display: inline;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
}Result:
......... ADVERTISEMENT .........
..8..
.title {
text-align: center;
}
ul.nav {
list-style-type: none;
text-align: center;
padding: 1;
margin: 1;
}
ul.nav > li {
display: inline;
}
li a {
text-decoration: none;
background-color: rgb(11, 105, 41);
color: #fff;
padding: 15px 25px;
}......... ADVERTISEMENT .........
..8..
Final Words
You can make a HTML list appear horizontally by assigning the display CSS property of <li> elements with the inline value. It changes the default flow of both ordered and unordered lists. Now every <li> box sits right after each other instead of creating a line break.
These horizontal lists are also the basis of many other components of a website. With some style changes, you can make them look like a typical top navigation bar, for example.
| To format html more beautiful use HTML formatter(html beautifier) tool at ittutoria.net |
I have the same case and it improve my issue
I have these samples for your reference
The CSS code style will transform the
<ul>element into a navigation bar component as below:Just add the
navclass to the<ul>tag to use the CSS style