CSS
इनलाइन-ब्लॉक लेआउट

उचित नेविगेशन बार

क्षैतिज रूप से उचित नेविगेशन (मेनू) बार में कुछ आइटम हैं जिन्हें उचित ठहराया जाना चाहिए। पहले (बाएं) आइटम का कंटेनर के भीतर कोई बाएं मार्जिन नहीं है, अंतिम (दाएं) आइटम का कंटेनर के भीतर कोई सही मार्जिन नहीं है। वस्तुओं के बीच की दूरी समान है, व्यक्तिगत मद की चौड़ाई पर स्वतंत्र है।

एचटीएमएल

<nav>
    <ul>
        <li>abc</li>
        <li>abcdefghijkl</li>
        <li>abcdef</li>
    </ul>
</nav>

सीएसएस

nav {
    width: 100%;
    line-height: 1.4em;
}
ul {
    list-style: none;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: justify;
    margin-bottom: -1.4em;
}
ul:after {
    content: "";
    display: inline-block;
    width: 100%;
}
li {
    display: inline-block;
}

टिप्पणियाँ

• nav , ul और li टैग को 'नेविगेशन की सूची (मेनू) आइटम' के उनके अर्थ के लिए चुना गया था। अन्य टैग का भी उपयोग किया जा सकता है।
• के :after छद्म तत्व ul में एक अतिरिक्त 'लाइन' का कारण बनता है और इस तरह इस ब्लॉक की एक अतिरिक्त, खाली ऊंचाई अन्य सामग्री को नीचे धकेलती है। यह नकारात्मक margin-bottom द्वारा हल किया जाता है, जिसमें line-height (लेकिन नकारात्मक) के समान परिमाण होना चाहिए।
• यदि सभी आइटमों को फिट करने के लिए पृष्ठ बहुत संकीर्ण हो जाता है, तो आइटम एक नई लाइन (दाईं ओर से शुरू) से टूट जाएंगे और इस रेखा पर उचित होंगे। मेनू की कुल ऊंचाई आवश्यकतानुसार बढ़ेगी।