How to make an inline list
Hello Developers,
Sometimes we search to make a vertical list horizontal or inline. We can make this by writing short CSS.
We can easily create a list using <ul></ul> and <li></li>. If we use the CSS in li, we will have to write display: inline-block;
I have written this CSS in a class by the following code:
.list li {
display: inline-block;
font-size: 20px;
padding: 20px;
}
Also, add some style to look better. Add code CSS in the main list by adding the below CSS:
.list {
background-color: blue;
color: white;
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
}
If we add the class in <ul></ul> block, then it will create a horizontal or inline line
<ul class="list">
<li>Home</li>
<li>About Us</li>
<li>Our Clients</li>
<li>Contact Us</li>
</ul>
Now put all the code in a html file and the complete code looks like this:
<!DOCTYPE html>
<html>
<head>
<style>
.list {
background-color: blue;
color: white;
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
}
.list li {
display: inline-block;
font-size: 20px;
padding: 20px;
}
</style>
</head>
<body>
<h1>Inline List Links</h1>
<ul class="list">
<li>Home</li>
<li>About Us</li>
<li>Our Clients</li>
<li>Contact Us</li>
</ul>
</body>
</html>
The output will look like this:
Hope this short writing will help you in the journey of development.
Read More: Get started with Tailwind CSS (Using CDN)
K. M. Shawkat Zamil
Senior Software Engineer
I am a Senior Software Engineer in a reputed company in Bangladesh. I am a big fan of Laravel, PHP Programming, MSSQL Server, MySql, JavaScript, and lots more. I love to help people who are especially eager to learn. I believe in patience and motivation.