Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Ajustar tamaño de <ul> a la cantidad de <li> en el foro de CSS en Foros del Web. 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: ...
  #1 (permalink)  
Antiguo 13/10/2014, 12:50
 
Fecha de Ingreso: abril-2010
Mensajes: 68
Antigüedad: 13 años, 10 meses
Puntos: 0
Ajustar tamaño de <ul> a la cantidad de <li>

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.

Última edición por Pelydas; 13/10/2014 a las 13:06
  #2 (permalink)  
Antiguo 13/10/2014, 15:17
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.725
Antigüedad: 22 años, 1 mes
Puntos: 998
Respuesta: Ajustar tamaño de <ul> a la cantidad de <li>

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
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #3 (permalink)  
Antiguo 13/10/2014, 17:44
Avatar de siddartha23  
Fecha de Ingreso: septiembre-2013
Mensajes: 357
Antigüedad: 10 años, 5 meses
Puntos: 39
Respuesta: Ajustar tamaño de <ul> a la cantidad de <li>

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...
__________________
velarde23.com - Soluciones Web
  #4 (permalink)  
Antiguo 14/10/2014, 09:14
 
Fecha de Ingreso: abril-2010
Mensajes: 68
Antigüedad: 13 años, 10 meses
Puntos: 0
Respuesta: Ajustar tamaño de <ul> a la cantidad de <li>

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.

Etiquetas: cantidad, tamaño
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:23.