अंतिम इनलाइन सूची आइटम कंटेनर की शेष चौड़ाई बढ़ाएं

Question

मैं अंतिम इनलाइन सूची आइटम को अपने कंटेनर का विस्तार करने का एक तरीका ढूंढ रहा हूं। तो मेरे पास ऐसा कुछ है।

<nav> 
    <ul> 
    <li></li> //width = 50px 
    <li></li> //width = 50px 
    <li class="last"></li> //width needs to fill the remaining 300px 
    </ul> 
</nav> 

nav { 
    width:400px; 
    height:50px; 
} 
nav > ul > li { 
    display:inline-block; 
    padding:5px; 
} 

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

Answer 1

आप display: table उपयोग कर सकते हैं (और table-cell और, कम से कम फ़ायरफ़ॉक्स, table-row के लिए) table-layout: fixed साथ तालिका एल्गोरिथ्म जहां लेखक द्वारा चौड़ाई संकेत दिया पाने के लिए (आप) ब्राउज़र द्वारा लागू कर रहे हैं और नहीं अन्य तरह जहां ब्राउज़र करना कोशिकाओं की चौड़ाई को उनकी सामग्री में अनुकूलित करने के लिए सबसे अच्छा है।
फिर अंतिम "को छोड़कर सभी" कोशिकाओं "में 50px की चौड़ाई लागू करना।
मैं क्योंकि Fx 18 ul पर display: table स्थापित करने पर अपनी nav माता पिता पर ul और table पर table-row इस्तेमाल किया की उम्मीद प्रभाव (ब्राउज़र एक छाया तत्व में पंक्ति के रूप में अभिनय उर्फ ​​लापता भागों बनाने के लिए होने से संबंधित कुछ भी नहीं था -के बीच)। बहुत वर्णनात्मक होने के नाते (यह तत्व एक तालिका के रूप में प्रस्तुत किया जाना चाहिए और यह एक पंक्ति के रूप में और इन्हें कक्ष के रूप में) मदद करता है।

यहाँ फिडल: http://jsfiddle.net/X6UX9/1/

HTML:

<nav> 
    <ul> 
    <li> //width = 50px</li> 
    <li>//width = 50px</li> 
    <li class="last">//width (...) 300px</li> 
    </ul> 
</nav> 

सीएसएस:

* { 
    -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
      box-sizing: border-box; 
} 
nav { 
    display: table; 
    table-layout: fixed; 
    width:400px; 
    height:50px; 
} 
nav > ul { 
     display: table-row; 
} 
nav li { 
    display: table-cell; 
    padding:5px; 
    outline: 1px dashed blue; 
} 
nav li:not(:last-child) { 
    width: 50px; 
} 

पुनश्च: चौड़ाई की स्थापना के लिए :last-child उपयोग करने के साथ IE9 +, नहीं IE8 + मैं के रूप में संगत है पहेली में कहा ...

संपादित करें: ओह, मैंने पिछले li पर आपकी .last कक्षा नहीं देखी। खैर, आपको विचार मिलता है :)
संपादित 2: इस कक्षा का उपयोग करके अद्यतन पहेली और न तो :not() और न ही :last-child छद्म