設置列表項的寬度來填充無序列表

Question

所以我有一個水平的無序列表與設置寬度。在裏面，我有一個動態數量的列表項。它可能是2個項目，或6個 - 這取決於幾個因素。

我希望能夠設置每個列表項的寬度，以便它們填充ul的整個寬度，而不管內部有多少物品。所以如果有1個列表項，它的寬度將是100％; 2，他們都是50％，等等。

這裏是我的HTML和CSS：

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/

有沒有辦法用CSS來做到這一點，否則我將不得不使用jQuery？

Answer 1

沒有純CSS的方式，我害怕。

編輯：最合適的解決方案的jQuery我能想到的：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！），你會運行到一些討厭的問題與舍入錯誤。

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

沒有JavaScript的一個解決方案。

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

這也可能只是與CSS，但只能在現代瀏覽器中工作。

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);