CSS में <li> एलिमेंट्स को display: inline या display: inline-block सेट करके हॉरिजॉन्टल (क्षैतिज) नेविगेशन बार बनाया जा सकता है। डिफ़ॉल्ट रूप से लिस्ट आइटम्स ब्लॉक होते हैं और वर्टिकली स्टैक होते हैं।
उदाहरण
नीचे दिए गए उदाहरण में, अनऑर्डर्ड लिस्ट (<ul>) के आइटम्स को इंलाइन करके हॉरिजॉन्टल नेविगेशन बार बनाया गया है।
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.active {
background-color: #4CAF50;
color: white;
}
li {
border-bottom: 1px solid #555;
display: inline;
}
</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>
मुख्य बिंदु:
list-style-type: none- बुलेट पॉइंट्स हटाता हैdisplay: inline- लिस्ट आइटम्स को एक लाइन में रखता हैmargin: 0; padding: 0- डिफ़ॉल्ट स्पेसिंग हटाता है.activeक्लास - वर्तमान पेज को हाइलाइट करता है
बेहतर विकल्प: display: inline-block या फ्लेक्सबॉक्स (display: flex) का उपयोग करें क्योंकि inline एलिमेंट्स पर पैडिंग/मार्जिन सीमित होता है।
