मैं * वास्तव में * HTML + CSS में एक क्षैतिज मेनू को कैसे सही ठहराऊं?

Question 1

आपको HTML में मेनू बार पर बहुत सारे ट्यूटोरियल मिलते हैं, लेकिन इस विशिष्ट (हालांकि IMHO सामान्य) मामले के लिए, मुझे कोई भी अच्छा समाधान नहीं मिला है:

#  THE MENU ITEMS    SHOULD BE    JUSTIFIED     JUST AS    PLAIN TEXT     WOULD BE  #
#  ^                                                                             ^  #

पाठ-केवल मेनू आइटम की एक अलग संख्या है और पृष्ठ लेआउट तरल है।
पहला मेनू आइटम बाएं-संरेखित किया जाना चाहिए, अंतिम मेनू आइटम सही-संरेखित होना चाहिए।
बचे हुए आइटमों को मेनू बार पर बेहतर तरीके से फैलाना चाहिए।
संख्या अलग-अलग है, इसलिए इष्टतम चौड़ाई की पूर्व-गणना करने का कोई मौका नहीं है।

ध्यान दें कि एक टेबल यहां भी काम नहीं करेगा:

यदि आप सभी टीडी को केंद्र में रखते हैं, तो पहला और अंतिम आइटम सही ढंग से संरेखित नहीं हैं।
यदि आपने पहला सम्मान बाएं-संरेखित और दाएं-संरेखित किया है। अंतिम आइटम, रिक्ति उप-इष्टतम होगी।

क्या यह अजीब नहीं है कि HTML और CSS का उपयोग करके इसे साफ तरीके से लागू करने का कोई स्पष्ट तरीका नहीं है?

Question 2

आधुनिक दृष्टिकोण - फ्लेक्सबॉक्स !

अब जब CSS3 flexboxes के पास बेहतर ब्राउज़र समर्थन है , तो हम में से कुछ अंततः उनका उपयोग करना शुरू कर सकते हैं। अधिक ब्राउज़र कवरेज के लिए बस अतिरिक्त विक्रेता उपसर्ग जोड़ें ।

इस उदाहरण में, तुम सिर्फ पेरेंट तत्व के सेट हैं displayकरने के लिए flexऔर फिर बदल justify-contentसंपत्ति या तो करने के लिए space-betweenया space-aroundके बीच या बच्चों के आसपास अंतरिक्ष जोड़ने के लिए आइटम flexbox।

उपयोग करनाjustify-content: space-between - ( यहाँ उदाहरण) :

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu {
    display: flex;
    justify-content: space-between;
}

<ul class="menu">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three Longer</li>
    <li>Item Four</li>
</ul>

स्निपेट का विस्तार करें

उपयोग करनाjustify-content: space-around - (यहाँ उदाहरण) :

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu {
    display: flex;
    justify-content: space-around;
}

<ul class="menu">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three Longer</li>
    <li>Item Four</li>
</ul>

स्निपेट का विस्तार करें

Question 3

सबसे सरल बात यह है कि लाइन के अंत में एक तत्व सम्मिलित करके लाइन को तोड़ने के लिए मजबूर करना है जो कि उपलब्ध उपलब्ध स्थान से अधिक कब्जा कर लेगा और फिर इसे छिपा देगा। मैंने इसे एक सरल spanतत्व के साथ आसानी से पूरा किया है जैसे:

#menu {
  text-align: justify;
}

#menu * {
  display: inline;
}

#menu li {
  display: inline-block;
}

#menu span {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 0;
}

<div id="menu">
  <ul>
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 3</a></li>
    <li><a href="#">Menu item 2</a></li>
  </ul>
  <span></span>
</div>

स्निपेट का विस्तार करें

#menu spanचयनकर्ता के अंदर सभी कबाड़ (जहाँ तक मैंने पाया है) अधिकांश ब्राउज़रों को खुश करने के लिए आवश्यक है। यह spanतत्व की चौड़ाई को 100% तक बाध्य करना चाहिए , जो display: inline-blockनियम के कारण एक इनलाइन तत्व माना जाता है, क्योंकि एक लाइन ब्रेक का कारण होना चाहिए । ब्लॉक-स्तरीय शैली के नियमों को inline-blockभी spanसंभव बनाता हैwidth जिसके कारण तत्व मेनू के अनुरूप नहीं होता है और इस तरह मेनू लाइन-ब्रेक करने के लिए होता है।

आपको निश्चित रूप spanसे अपने उपयोग के मामले और डिजाइन की चौड़ाई को समायोजित करने की आवश्यकता है , लेकिन मुझे आशा है कि आपको सामान्य विचार मिलेगा और इसे अनुकूलित कर सकते हैं।

Question 4

ठीक है, यह समाधान IE6 / 7 पर काम नहीं करता है, क्योंकि :before/ के समर्थन की कमी है :after, लेकिन:

ul {
  text-align: justify;
  list-style: none;
  list-style-image: none;
  margin: 0;
  padding: 0;
}
ul:after {
  content: "";
  margin-left: 100%;
}
li {
  display: inline;
}
a {
  display: inline-block;
}

<div id="menu">
  <ul>
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 2</a></li>
    <li><a href="#">Menu item 3</a></li>
    <li><a href="#">Menu item 4</a></li>
    <li><a href="#">Menu item 5</a></li>
  </ul>
</div>

स्निपेट का विस्तार करें

इसका कारण यह है कि मेरे पास टैग एक inline-blockहै क्योंकि मैं नहीं चाहता कि अंदर के शब्दों को भी उचित ठहराया जाए, और मैं गैर-ब्रेकिंग स्पेस का भी उपयोग नहीं करना चाहता।

Question 5

हल मिल गया। FF, IE6, IE7, Webkit, आदि में काम करता है।

सुनिश्चित करें कि आपने को बंद करने से पहले कोई व्हाट्सएप नहीं डाला है span.inner। IE6 टूट जाएगा।

आप वैकल्पिक रूप से .outerएक चौड़ाई दे सकते हैं

.outer {
  text-align: justify;
}
.outer span.finish {
  display: inline-block;
  width: 100%;
}
.outer span.inner {
  display: inline-block;
  white-space: nowrap;
}

<div class="outer">
  <span class="inner">THE MENU ITEMS</span>
  <span class="inner">SHOULD BE</span>
  <span class="inner">JUSTIFIED</span>
  <span class="inner">JUST AS</span>
  <span class="inner">PLAIN TEXT</span>
  <span class="inner">WOULD BE</span>
  <span class="finish"></span>
</div>

स्निपेट का विस्तार करें

Question 6

ओपेरा, फ़ायरफ़ॉक्स, क्रोम और IE के साथ काम करता है

ul {
   display: table;
   margin: 1em auto 0;
   padding: 0;
   text-align: center;
   width: 90%;
}

li {
   display: table-cell;
   border: 1px solid black;
   padding: 0 5px;
}

Question 7

अभी तक एक और समाधान। मेरे पास html से निपटने के लिए कोई विकल्प नहीं था जैसे कि प्रतिष्ठित वर्ग आदि को जोड़ना, इसलिए मुझे एक शुद्ध सीएसएस तरीका मिला।

क्रोम, फ़ायरफ़ॉक्स, सफारी में काम करता है .. IE के बारे में नहीं जानता।

टेस्ट: http://jsfiddle.net/c2crP/1

ul {
  margin: 0; 
  padding: 0; 
  list-style: none; 
  width: 200px; 
  text-align: justify; 
  list-style-type: none;
}
ul > li {
  display: inline; 
  text-align: justify; 
}

/* declaration below will add a whitespace after every li. This is for one line codes where no whitespace (of breaks) are present and the browser wouldn't know where to make a break. */
ul > li:after {
  content: ' '; 
  display: inline;
}

/* notice the 'inline-block'! Otherwise won't work for webkit which puts after pseudo el inside of it's parent instead of after thus shifting also the parent on next line! */
ul > li:last-child:after {
  display: inline-block;
  margin-left: 100%; 
  content: ' ';
}

<ul>
  <li><a href="#">home</a></li>
  <li><a href="#">exposities</a></li>
  <li><a href="#">werk</a></li>
  <li><a href="#">statement</a></li>
  <li><a href="#">contact</a></li>
</ul>

स्निपेट का विस्तार करें

Question 8

इसके <p>साथ बनाओ text-align: justify?

अद्यतन : कोई बात नहीं। जैसा कि मैंने सोचा था कि यह बिल्कुल भी काम नहीं करता है।

अद्यतन 2 : अभी IE के अलावा किसी भी ब्राउज़र में काम नहीं करता है, लेकिन CSS3 के रूप में इसके लिए समर्थन हैtext-align-last

Question 9

गेको-आधारित ब्राउज़रों के लिए, मैं इस समाधान के साथ आया था। यह समाधान WebKit ब्राउज़रों के साथ काम नहीं करता है, हालांकि (जैसे क्रोमियम, मिडोरी, एपिफेनी), वे अंतिम आइटम के बाद भी पीछे की जगह दिखाते हैं।

मैंने मेन्यू बार को एक उचित पैराग्राफ में रखा । समस्या यह है कि एक स्पष्ट अनुच्छेद की अंतिम पंक्ति को स्पष्ट कारणों से उचित नहीं ठहराया जाएगा। इसलिए मैं एक व्यापक अदृश्य तत्व (उदाहरण के लिए एक img) जोड़ता हूं जो वारंट करता है कि पैराग्राफ कम से कम दो लाइनों लंबा है।

अब मेनू बार उसी एल्गोरिथ्म द्वारा उचित है जिसे ब्राउज़र सादे पाठ के औचित्य के लिए उपयोग करता है।

कोड:

<div style="width:500px; background:#eee;">
 <p style="text-align:justify">
  <a href="#">THE&nbsp;MENU&nbsp;ITEMS</a>
  <a href="#">SHOULD&nbsp;BE</a>
  <a href="#">JUSTIFIED</a>
  <a href="#">JUST&nbsp;AS</a>
  <a href="#">PLAIN&nbsp;TEXT</a>
  <a href="#">WOULD&nbsp;BE</a>
  <img src="/Content/Img/stackoverflow-logo-250.png" width="400" height="0"/>
 </p>
 <p>There's an varying number of text-only menu items and the page layout is fluid.</p>
 <p>The first menu item should be left-aligned, the last menu item should be right-aligned. The remaining items should be spread optimal on the menu bar.</p>
 <p>The number is varying,so there's no chance to pre-calculate the optimal widths.</p>
 <p>Note that a TABLE won't work here as well:</p>
 <ul>
  <li>If you center all TDs, the first and the last item aren't aligned correctly.</li>
  <li>If you left-align and right-align the first resp. the last items, the spacing will be sub-optimal.</li>
 </ul>
</div>

टिप्पणी: क्या आपको लगता है कि मैंने धोखा दिया है? अंतरिक्ष भराव तत्व को जोड़ने के लिए, मुझे मेनू बार की चौड़ाई के बारे में कुछ अनुमान लगाना होगा। तो यह समाधान पूरी तरह से नियमों के नीचे नहीं है।

Question 10

पाठ केवल उचित है यदि वाक्य स्वाभाविक रूप से एक पंक्ति विराम का कारण बनता है। तो आपको बस इतना करना चाहिए कि स्वाभाविक रूप से एक लाइन ब्रेक को मजबूर करें, और दूसरी लाइन पर व्हाट्स को छिपाएं:

सीएसएस:

ul {
  text-align: justify;
  width: 400px;
  margin: 0;
  padding: 0;
  height: 1.2em;
  /* forces the height of the ul to one line */
  overflow: hidden;
  /* enforces the single line height */
  list-style-type: none;
  background-color: yellow;
}

ul li {
  display: inline;
}

ul li.break {
  margin-left: 100%;
  /* use e.g. 1000px if your ul has no width */
}

HTML:

<ul>
  <li><a href="/">The</a></li>
  <li><a href="/">quick</a></li>
  <li><a href="/">brown</a></li>
  <li><a href="/">fox</a></li>
  <li class="break">&nbsp;</li>
</ul>

Li.break तत्व अंतिम मेन्यू आइटम के समान लाइन पर होना चाहिए और इसमें कुछ सामग्री (इस मामले में एक गैर ब्रेकिंग स्पेस) होनी चाहिए, अन्यथा कुछ ब्राउज़रों में, यदि यह एक ही लाइन पर नहीं है, तो आपको कुछ छोटे दिखाई देंगे आपकी पंक्ति के अंत में अतिरिक्त स्थान, और यदि इसमें कोई सामग्री नहीं है तो इसे नजरअंदाज कर दिया जाता है और यह रेखा उचित नहीं है।

IE7, IE8, IE9, Chrome, Firefox 4 में परीक्षण किया गया।

Question 11

अगर जावास्क्रिप्ट के साथ जाना संभव है (यह स्क्रिप्ट म्यूटूल पर आधारित है)

<script type="text/javascript">//<![CDATA[
    window.addEvent('load', function(){
        var mncontainer = $('main-menu');
        var mncw = mncontainer.getSize().size.x;
        var mnul = mncontainer.getFirst();//UL
        var mnuw = mnul.getSize().size.x;
        var wdif = mncw - mnuw;
        var list = mnul.getChildren(); //get all list items
        //get the remained width (which can be positive or negative)
        //and devided by number of list item and also take out the precision
        var liwd = Math.floor(wdif/list.length);
        var selw, mwd=mncw, tliw=0;
        list.each(function(el){
            var elw = el.getSize().size.x;
            if(elw < mwd){ mwd = elw; selw = el;}
            el.setStyle('width', elw+liwd);
            tliw += el.getSize().size.x;
        });
        var rwidth = mncw-tliw;//get the remain width and set it to item which has smallest width
        if(rwidth>0){
            elw = selw.getSize().size.x;
            selw.setStyle('width', elw+rwidth);
        }
    });
    //]]>
</script>

और सीएसएस

<style type="text/css">
    #main-menu{
        padding-top:41px;
        width:100%;
        overflow:hidden;
        position:relative;
    }
    ul.menu_tab{
        padding-top:1px;
        height:38px;
        clear:left;
        float:left;
        list-style:none;
        margin:0;
        padding:0;
        position:relative;
        left:50%;
        text-align:center;
    }
    ul.menu_tab li{
        display:block;
        float:left;
        list-style:none;
        margin:0;
        padding:0;
        position:relative;
        right:50%;
    }
    ul.menu_tab li.item7{
        margin-right:0;
    }
    ul.menu_tab li a, ul.menu_tab li a:visited{
        display:block;
        color:#006A71;
        font-weight:700;
        text-decoration:none;
        padding:0 0 0 10px;
    }
    ul.menu_tab li a span{
        display:block;
        padding:12px 10px 8px 0;
    }
    ul.menu_tab li.active a, ul.menu_tab li a:hover{
        background:url("../images/bg-menutab.gif") repeat-x left top;
        color:#999999;
    }
    ul.menu_tab li.active a span,ul.menu_tab li.active a.visited span, ul.menu_tab li a:hover span{
        background:url("../images/bg-menutab.gif") repeat-x right top;
        color:#999999;
    }
</style>

और अंतिम html

<div id="main-menu">
    <ul class="menu_tab">
        <li class="item1"><a href="#"><span>Home</span></a></li>
        <li class="item2"><a href="#"><span>The Project</span></a></li>
        <li class="item3"><a href="#"><span>About Grants</span></a></li>
        <li class="item4"><a href="#"><span>Partners</span></a></li>
        <li class="item5"><a href="#"><span>Resources</span></a></li>
        <li class="item6"><a href="#"><span>News</span></a></li>
        <li class="item7"><a href="#"><span>Contact</span></a></li>
    </ul>
</div>

Question 12

सरल मार्कअप, ओपेरा, एफएफ, क्रोम, IE7, IE8 में परीक्षण किया गया:

<div class="nav">
  <a href="#" class="nav_item">nav item1</a>
  <a href="#" class="nav_item">nav item2</a>
  <a href="#" class="nav_item">nav item3</a>
  <a href="#" class="nav_item">nav item4</a>
  <a href="#" class="nav_item">nav item5</a>
  <a href="#" class="nav_item">nav item6</a>
  <span class="empty"></span>
</div>

और सीएसएस:

.nav {
  width: 500px;
  height: 1em;
  line-height: 1em;
  text-align: justify;
  overflow: hidden;
  border: 1px dotted gray;
}
.nav_item {
  display: inline-block;
}
.empty {
  display: inline-block;
  width: 100%;
  height: 0;
}

जीवंत उदाहरण ।

Question 13

यह पूरी तरह से कुछ सावधानीपूर्वक माप और अंतिम बच्चे के चयनकर्ता द्वारा प्राप्त किया जा सकता है।

ul li {
margin-right:20px;
}
ul li:last-child {
margin-right:0;
}

Question 14

मुझे पता है कि मूल प्रश्न HTML + CSS निर्दिष्ट है, लेकिन यह विशेष रूप से कोई जावास्क्रिप्ट नहीं कहा ;)

सीएसएस और मार्कअप को यथासंभव साफ रखने की कोशिश कर रहा है, और यथासंभव अर्थपूर्ण (मेनू के लिए एक यूएल का उपयोग करके) मैं इस सुझाव के साथ आया हूं। शायद आदर्श नहीं है, लेकिन यह एक अच्छा प्रारंभिक बिंदु हो सकता है:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

    <head>
        <title>Kind-of-justified horizontal menu</title>

        <style type="text/css">
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
            width: 100%;
        }

        ul li {
            display: block;
            float: left;
            text-align: center;
        }
        </style>

        <script type="text/javascript">
            setMenu = function() {
                var items = document.getElementById("nav").getElementsByTagName("li");
                var newwidth = 100 / items.length;

                for(var i = 0; i < items.length; i++) {
                    items[i].style.width = newwidth + "%";
                }
            }
        </script>

    </head>

    <body>

        <ul id="nav">
            <li><a href="#">first item</a></li>
            <li><a href="#">item</a></li>
            <li><a href="#">item</a></li>
            <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
            <li><a href="#">last item</a></li>
        </ul>

        <script type="text/javascript">
            setMenu();
        </script>

    </body>

</html>