-.- quieres mantener cierta distancia entre los items? entonces dale un display:block a los elementos "li" luego dentro de ellos puedes darle un text-align:center; con eso los mantendrá centrados.
Uhmmm veo que tu problema es el aumento de items en el menú, pero si vamos por lo seguro, es que si alguien puede aumentar items a tontas y locas entonces seguro que también podrá aumentar demasiados.
Una solución podría ser que des un margin-left entre los elementos "li" dándole al "ul" un display:block y aplicandole un text-align:center; asi los items que van entrando se acomodan. Claro, como te dije, si alguien se pasa de la raya entonces de todas maneras puede hacer que hayan demasiados elementos.
Saludos!!
Código CSS:
Ver originalul{
display:block;
width:900px (digamos que esa es tu medida);
height:20px;
overflow:hidden;
text-align:center;
}
ul li{
margin-left:5px;
}
Uhmmm tu problema te lo resuelvo con JS si no me crucifican aqui xD.
Primero, pensemos que tu div tiene un tamaño fijo, digamos que es de 900 px, luego la lista tiene un id digamos que es "lista". Ok comenzamos
Código javascript
:
Ver originaltamano = 900; (Tamano de tu menú)
function comodar(){
var elemento = document.getElementById('lista').getElementsByTagName('li'); (Cogemos todos los elementos li)
var numero = elemento.length; (Contamos los elementos)
var tamanoelemento = tamano/numero; (dividimos tamano entre numero de elementos)
elemento.style.width = tamanoelemento + "px"; (el resultado será el tamaño de los elementos li)
}
}
Para esto ya deberías haber definido en tu css que:
Código css:
Ver originalli{
display:block;
width:0;
height:20px; (Numero que quieras)
text-align:center;
}
Creo que es una opción, ve si te acomoda.