Imposta la larghezza degli elementi della lista per riempire la lista non ordinata

Question

Quindi ho una lista non ordinata orizzontale con una larghezza impostata. All'interno, ho un numero dinamico di voci di elenco. Potrebbe essere 2 articoli o 6 - dipende da diversi fattori.

Mi piacerebbe essere in grado di impostare la larghezza di ciascuna voce di elenco in modo che riempiano l'intera larghezza della cella, indipendentemente dal numero di elementi presenti all'interno. Quindi, se c'era 1 elemento della lista, la sua larghezza sarebbe 100%; 2, e sarebbero entrambi al 50% e così via.

Ecco il mio HTML e 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> 

Qui è in jFiddle: http://jsfiddle.net/vDVvm/3/

C'è un modo per fare questo con i CSS, o dovrò usare jQuery?

Answer 1

nessun modo con CSS puro, ho paura.

Edit: La maggior parte soluzione adeguata jQuery mi viene in mente: 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();  
}); 

Occorre tuttavia tenere presente, che ogni volta (100% number_of_lis == 0!), Dovrai essere in esecuzione in alcuni problemi fastidiosi con errori di arrotondamento.

Answer 2

utilizzando jQuery, si può fare qualcosa di simile:

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

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

supponendo che il codice HTML appare come:

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

Answer 3

Ecco un violino di lavoro: http://jsfiddle.net/vDVvm/7/

Answer 4

una soluzione senza 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/

Può non essere cross browser abbastanza, però.

Answer 5

Questo è possibile anche solo con css, ma funzionerà solo nei browser moderni.

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

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

Answer 6

Ecco un miglioramento sulla funzione di 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);