अनियंत्रित सूची भरने के लिए सूची आइटमों की चौड़ाई सेट करें

Question

तो मेरे पास एक सेट चौड़ाई वाला एक क्षैतिज अनॉर्डर्ड सूची है। अंदर, मेरे पास सूची आइटम की एक गतिशील संख्या है। यह 2 आइटम हो सकता है, या 6 - यह कई कारकों पर निर्भर करता है।

मैं प्रत्येक सूची आइटम की चौड़ाई निर्धारित करने में सक्षम होना चाहता हूं ताकि वे उल की पूरी चौड़ाई भर सकें, चाहे कितनी वस्तुएं अंदर हों। तो यदि 1 सूची वस्तु थी, तो इसकी चौड़ाई 100% होगी; 2, और वे दोनों 50% होंगे, और इसी तरह।

यहाँ मेरी HTML और सीएसएस है:

ul 
{ 
    width: 300px; 
    height: 50px; 
    background-color: #000000; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

li 
{ 
    float: left; 
    height: 50px; 
    background-color: #4265CE; 
    margin: 0; 
    padding: 0; 
} 

<ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
</ul> 

यहाँ यह jFiddle में है: http://jsfiddle.net/vDVvm/3/

वहाँ सीएसएस के साथ ऐसा करने का कोई तरीका है, या मैं jQuery का उपयोग करना होगा?

Answer 1

शुद्ध सीएसएस के साथ कोई रास्ता नहीं, मुझे डर लग रहा।

संपादित करें: http://jsfiddle.net/vDVvm/8/

(function($){ 
    $.fn.autowidth = function() { 
    return this.each(function() {   
     $('li', this).css({'width' : (100/$('li', this).length) + '%'}) 
    }); 
    }; 
})(jQuery); 

$(document).ready(function(){ 
    $('.fill-me').autowidth();  
}); 

ध्यान रखें, हालांकि, कि जब भी (100% number_of_lis == 0!), तुम कुछ बुरा समस्याओं में चल रहा हो रहे हैं: सबसे उचित jQuery समाधान मैं के बारे में सोच सकते हैं गोल त्रुटियों के साथ।

Answer 2

jQuery का उपयोग करना, आप कुछ इस तरह कर सकते हैं:

var li = $('#mylist li').size(); 
var liWidth = 100/li; 

$('#mylist li').width(liWidth + '%'); 

अपने HTML संभालने लगता है:

<ul id="mylist"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
</ul> 

Answer 3

यहाँ एक काम कर रहा बेला है: http://jsfiddle.net/vDVvm/7/

Answer 4

जावास्क्रिप्ट के बिना एक समाधान।

ul 
{ 
    width: 300px; 
    height: 50px; 
    background-color: #000000; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    display: table; 
} 

li 
{ 
    height: 50px; 
    background-color: #4265CE; 
    margin: 0; 
    padding: 0; 
    display: table-cell; 
} 

http://jsfiddle.net/vDVvm/5/

हालांकि यह ब्राउज़र पर्याप्त पार नहीं हो सकता है,।

Answer 5

यह सीएसएस के साथ भी संभव है, लेकिन केवल आधुनिक ब्राउज़रों में ही काम करेगा।

ul { 
    /* ... */ 
    display: table; 
} 

li { 
    /* ... */ 
    display: table-cell; 
} 

Answer 6

यहाँ vzwick के समारोह पर एक सुधार है:

(function($){ 
    $.fn.autowidth = function() { 
    return this.each(function() { 
     var w = $(this).width(); 
     var liw = w/$(this).children('li').length; 
     $(this).children('li').each(function(){ 
      var s = $(this).outerWidth(true)-$(this).width(); 
      $(this).width(liw-s); 
     }); 
    }); 
    }; 
})(jQuery);