[SOLUCIONADO] Ajustar tamaño de <ul> a la cantidad de <li>

[Pelydas]

Hola a todos. Estoy haciendo un menu horizontal usando <nav><ul> y <li> y me va bastante bien, pero hay 3 cosas que no puedo lograr:

1ra. que el ancho total de la <ul> o del <nav> se ajuste a los <li> que tiene, es decir, que no tenga espacios a la derecha del ultimo <li> ni a la izquierda del primer <li>, es para una mejor presentacion, que solo el "menu" salga sombreado

2da. disminuir o aumentar el espacio entre los <li>

3ra. poder poner el box-shadow en el <ul> solo me sale en el <nav>


Necesito un empujoncito. Pueden ver un ejemplo en "http://soloaprendiz.22web.org/".

Gracias y saludos a todos.

[webosiris]

1. tienes un problema... matemático. A cada li le das una anchura del 20%, pero tienes solo 4 li, por lo que 20*4 = 80% y te falta un 20% del ul por cubrir. O agregas un 5° li o haces que los li midan 100/4 = 25%

También tienes que sacarle el padding a los li porque en el modelo de cajas normal el ancho total es la suma del width + padding + border + margin. Si le das un width de 25% pero a su vez le sumas 14px de padding, el resultado total va a ser + del 100%. Una alternativa a eso es usar box-sizing:border-box

Como estas usando display inline-table (y sucede lo mismo con inline-block) hay un pequeño problema cuando le das un ancho tan justo y se te va a ir uno de los li para abajo a causa de que se generan unos pequeños márgenes "fantasma" causados por espacios y saltos de línea en tu código fuente. No estoy seguro si este problema se debe a una mala redacción de la especificación técnica de css, a un bug de los navegadores o si es una de esas áreas "grises" donde no está especificado como hacer y cada navegador hace como quiere. Para solucionar esto tienes varias opciones:

• Eliminar todo espacio y salto de línea en la zona afectada, dejando el código todo en una línea de la siguiente forma: <ul><li></li></li>...
• No usar display inline-table y en cambio flotar los li con float:left para que te queden todos uno al lado del otro
• Darle al ul un font-size de 0 (si) y al li el font-size que corresponda

2. usa margin, reduciendo proporcionalmente el width para que cada li no te sume más del 25% de ancho total

3. elimina el overflow:hidden del nav

[siddartha23]

Si o si apende a usar box-sizing para hacer la distribución sin tantas restas cada vez que agreges padding o bordes a tus elementos...

[Pelydas]

Gracias siddartha23, logré mejorar bastante el menú aunque me quedó un pequeño margen en blanco a la derecha, pero es casi imperceptible, que pase como una "decoración", me ha costado bastante trabajo. Gracias tambien a webosirisa, me estudiaré a profundidad el "box-sizing" ya me lo había mensionado siddartha23. En la web de pruebas he puesto como me ha quedado, por si alguien tiene algún otro comentario. Saludos.