पूर्ण चौड़ाई क्षैतिज नेविगेशन बार

Question

शुरू बिंदु:

starting point http://img12.imageshack.us/img12/3100/example1a.gif

समाप्ति बिंदु:

end point http://img846.imageshack.us/img846/799/example2w.gif

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

Answer 1

तत्वों की एक स्थिर संख्या के साथ यह आसान है यह मुश्किल हो जाता है। दोबारा, यदि तत्वों की संख्या में बदलाव नहीं होता है, तो आप इसे सीएसएस कक्षाओं और स्थिर चौड़ाई के साथ करते हैं। अन्यथा इसे जावास्क्रिप्ट

संपादित करें: यहां तत्वों के बीच एक ही स्थान प्राप्त करने का जावास्क्रिप्ट तरीका होना चाहिए।

HTML:

<ul class="menu"> 
    <li>About Us</li> 
    <li>Our Products</li> 
    <li>FAQs</li> 
    <li>Contact</li> 
    <li>Login</li> 
</ul> 

जे एस:

function alignMenuItems(){ 
    var totEltWidth = 0; 
    var menuWidth = $('ul.menu')[0].offsetWidth; 
    var availableWidth = 0; 
    var space = 0; 

    var elts = $('.menu li'); 
    elts.each(function(inx, elt) { 
     // reset paddding to 0 to get correct offsetwidth 
     $(elt).css('padding-left', '0px'); 
     $(elt).css('padding-right', '0px'); 

     totEltWidth += elt.offsetWidth; 
    }); 

    availableWidth = menuWidth - totEltWidth; 

    space = availableWidth/(elts.length); 

    elts.each(function(inx, elt) { 
     $(elt).css('padding-left', (space/2) + 'px'); 
     $(elt).css('padding-right', (space/2) + 'px'); 
    }); 
} 

पूर्ण उदाहरण here

Answer 2

यदि आप जानते हैं कि आपके पास कितने तत्व होंगे, तो आप प्रत्येक तत्व की चौड़ाई को प्रतिशत के रूप में निर्दिष्ट कर सकते हैं। अन्यथा यह टेबल या जावास्क्रिप्ट का उपयोग किए बिना संभव नहीं होगा। , http://jsfiddle.net/X56cJ/

लेकिन यदि आप पाठ के बीच एक समान अंतर, नहीं तत्वों खुद को करना चाहते हैं - -

Answer 3

प्रदर्शन का उपयोग करना: अपने माता पिता पर तालिका, और प्रदर्शन: अपने बच्चों चाल करना होगा पर तालिका सेल । यह < = IE7 में समर्थित नहीं है।

http://codepen.io/simply-simpy/pen/jzski