Establecer el ancho de los elementos de la lista para completar la lista desordenada

Question

Tengo una lista desordenada horizontal con un ancho establecido. En el interior, tengo una cantidad dinámica de elementos de lista. Podría ser 2 elementos, o 6 - depende de varios factores.

Me gustaría poder establecer el ancho de cada elemento de la lista para que llenen todo el ancho de la ul, sin importar cuántos elementos haya dentro. Entonces, si hubiera 1 elemento de lista, su ancho sería 100%; 2, y ambos serían 50%, y así sucesivamente.

Aquí es mi HTML y 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> 

Aquí está en jFiddle: http://jsfiddle.net/vDVvm/3/

¿Hay una manera de hacer esto con CSS, o voy a tener que usar jQuery?

Answer 1

ninguna manera con CSS puro, me temo.

Editar: La solución más adecuada jQuery que se me ocurre: 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();  
}); 

Tenga en cuenta, sin embargo, que cada vez (100% number_of_lis == 0), que van a estar en ejecución en algunos problemas desagradables con errores de redondeo.

Answer 2

Usando jQuery, puede hacer algo como esto:

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

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

asumiendo el código HTML siguiente aspecto:

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

Answer 3

Aquí es un violín de trabajo: http://jsfiddle.net/vDVvm/7/

Answer 4

Una solución sin 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/

Puede ser cruzada navegador no es suficiente, sin embargo.

Answer 5

Esto también es posible solo con CSS, pero solo funcionará en los navegadores modernos.

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

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

Answer 6

Aquí es una mejora en la función de 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);