Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
What are Inline List Items in CSS
Inline list items in CSS are created by setting the display property to inline for list elements (<li>). This transforms vertically stacked list items into horizontally arranged elements, making them perfect for creating navigation bars and horizontal menus.
Syntax
li {
display: inline;
}
Example: Creating a Horizontal Navigation Bar
The following example demonstrates how to create a horizontal navigation bar using inline list items −
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
margin-right: 20px;
}
a {
text-decoration: none;
color: #333;
padding: 10px 15px;
background-color: #f4f4f4;
border-radius: 4px;
transition: background-color 0.3s;
}
a:hover {
background-color: #ddd;
}
.active {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#company" class="active">Company</a></li>
<li><a href="#product">Product</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</body>
</html>
A horizontal navigation bar appears with five menu items (Home, Company, Product, Services, Contact) arranged side by side. The "Company" item is highlighted with a green background, and all items have hover effects with gray background changes.
Key Properties for Inline Lists
| Property | Purpose | Common Value |
|---|---|---|
display: inline |
Makes list items horizontal | inline |
list-style-type |
Removes bullet points | none |
margin |
Adds spacing between items | 0 or custom |
padding |
Removes default list padding | 0 |
Conclusion
Inline list items are essential for creating horizontal navigation menus. By setting display: inline on list items, you transform vertical lists into horizontal layouts, perfect for modern web navigation.
Updated on: 2026-03-15T12:27:46+05:30
3K+ Views
Advertisements