CSS में प्रत्येक तत्व का एक डिफ़ॉल्ट डिस्प्ले मान होता है और हम इसे आसानी से बदल सकते हैं। यह डिस्प्ले प्रॉपर्टी मान को स्पष्ट रूप से सेट करके किया जाता है। आइए एक उदाहरण देखें जहां हम क्षैतिज मेनू के लिए इंलाइन डिस्प्ले प्रॉपर्टी मान सेट कर रहे हैं।
उदाहरण
<!DOCTYPE html> <html>
<head>
<style>
p { background-color: orange; color: white; }
li { display: inline; }
</style>
</head>
<body>
<h2>ट्यूटोरियल सूची</h2>
<p>निम्नलिखित संसाधनों की सूची है:</p>
<ul>
<li><a href="https://www.tutorialspoint.com/machine_learning/index.htm" target="_blank">मशीन लर्निंग</a></li>
<li><a href="https://www.tutorialspoint.com/python_data_science/index.htm" target="_blank">पायथन डेटा साइंस</a></li>
<li><a href="https://www.tutorialspoint.com/python/index.htm" target="_blank">पायथन</a></li>
<li><a href="https://www.tutorialspoint.com/csharp/index.htm">C#</a></li>
<li><a href="https://www.tutorialspoint.com/artificial_intelligence/index.htm" target="_blank">कृत्रिम बुद्धिमत्ता</a></li>
</ul>
</body>
</html>
आउटपुट

व्याख्या: डिफ़ॉल्ट रूप से <li> ब्लॉक-स्तरीय होते हैं (ऊर्ध्वाधर सूची)। display: inline उन्हें इंलाइन बनाता है (क्षैतिज पंक्ति)। inline-block भी उपयोग किया जा सकता है यदि मार्जिन/पैडिंग/चौड़ाई की आवश्यकता हो। flex या grid आधुनिक लेआउट के लिए बेहतर हैं।