Ustaw szerokość pozycji listy, aby wypełnić nieuporządkowaną listę

Question

Mam zatem poziomą nieuporządkowaną listę o ustalonej szerokości. Wewnątrz mam dynamiczną liczbę pozycji na liście. Może to być 2 elementy lub 6 - zależy to od kilku czynników.

Chciałbym móc ustawić szerokość każdego elementu listy tak, aby wypełniał całą szerokość ul, bez względu na to, ile elementów jest w środku. Więc jeśli był jeden element listy, jego szerokość wynosiłaby 100%; 2, i obie będą w 50%, i tak dalej.

Oto mój HTML i 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> 

Oto ona w jFiddle: http://jsfiddle.net/vDVvm/3/

Czy istnieje sposób to zrobić z CSS, albo będę musiał użyć jQuery?

Answer 1

nr sposób z czystym CSS, boję się.

Edit: najwłaściwszym rozwiązaniem jQuery mogę myśleć: 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();  
}); 

Należy pamiętać jednak, że ilekroć (100% number_of_lis == 0!), Masz zamiar zostać uruchomiony w rzęsiste problemów z błędami zaokrąglania.

Answer 2

jQuery, można zrobić coś takiego:

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

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

zakładając kod HTML wygląda następująco:

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

Answer 3

Oto skrzypce pracy: http://jsfiddle.net/vDVvm/7/

Answer 4

Rozwiązanie bez JavaScriptu.

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/

To może być nie tyle krzyż przeglądarka, jednak.

Answer 5

Jest to również możliwe tylko z css, ale działa tylko w nowoczesnych przeglądarkach.

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

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

Answer 6

Oto ulepszenie funkcji vzwick za:

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