Foros del Web » Creando para Internet » CSS »

Menu con li responsivo y justificado

Estas en el tema de Menu con li responsivo y justificado en el foro de CSS en Foros del Web. Hola estoy creando una web responsive, y tengo un problema con el menu que no encontre solucion en el foro asique abro un nuevo tema. ...
  #1 (permalink)  
Antiguo 04/11/2014, 14:47
Avatar de mostaza4  
Fecha de Ingreso: octubre-2008
Mensajes: 74
Antigüedad: 15 años, 4 meses
Puntos: 0
Menu con li responsivo y justificado

Hola estoy creando una web responsive, y tengo un problema con el menu que no encontre solucion en el foro asique abro un nuevo tema.

Tengo un menu con elementos li simples

Código HTML:
<ul>
   <li>Elemento 1</li>
   <li>Elemento 2</li>
   <li>Elemento 3</li>
</ul> 
y su css

Código:
ul{
 width: 100%
 }
li{
  width:30%;
  display: inline-block;
}
Como veran en simple, a medida que se achica las celdas se achican, el problema es que como tengo margenes, y padings, no puedo poner 33% a el <li> y entonces lo que hace es dejarme del lado derecho ese 10% 8%. Como puedo hacer para que ese sobrante se distribuya entre las celdas? No encontre nada capas es re simple pero no pude dar con la respuesta. Gracias

Última edición por mostaza4; 04/11/2014 a las 14:48 Razón: puse mal el titulo
  #2 (permalink)  
Antiguo 04/11/2014, 14:56
 
Fecha de Ingreso: marzo-2011
Ubicación: Oaxaca
Mensajes: 252
Antigüedad: 13 años
Puntos: 17
Respuesta: Menu con li responsivo y justificado

ya probaste que con la suma de los margenes, padings y anchos te sume el 100% (para eso, tambien tienes que hacer que los margenes y paddings esten en %)
  #3 (permalink)  
Antiguo 04/11/2014, 15:13
Avatar de siddartha23  
Fecha de Ingreso: septiembre-2013
Mensajes: 357
Antigüedad: 10 años, 5 meses
Puntos: 39
Respuesta: Menu con li responsivo y justificado

*{box-sizing:border-box}

Agrégale esto a tu reset de css y ya no vas a tener que restar los padding ni bordes del width o height que le pongas a tus cajas...
__________________
velarde23.com - Soluciones Web
  #4 (permalink)  
Antiguo 05/11/2014, 16:12
Avatar de mostaza4  
Fecha de Ingreso: octubre-2008
Mensajes: 74
Antigüedad: 15 años, 4 meses
Puntos: 0
Respuesta: Menu con li responsivo y justificado

eso de box
Cita:
*{box-sizing:border-box}
no me sirvio, no funciona todo sigue igual y lo d eponer margenes con porcentaje no lo pense voy a probar
  #5 (permalink)  
Antiguo 05/11/2014, 16:43
Avatar de siddartha23  
Fecha de Ingreso: septiembre-2013
Mensajes: 357
Antigüedad: 10 años, 5 meses
Puntos: 39
Respuesta: Menu con li responsivo y justificado

Cita:
Iniciado por mostaza4 Ver Mensaje
eso de box no me sirvio, no funciona todo sigue igual y lo d eponer margenes con porcentaje no lo pense voy a probar
Bueno lo del border-box es solo un inicio, solo sirve para resetear el modelo de caja y distribuir los objetos mas facilmente sin restarles nada cada vez que les agregas rellenos o bordes.

En tu ejemplo tienes 3 elementos li, cada uno con un tamaño que juntos ocupan 90% del contenedor, solo necesitarías darle un margin{0 5%} al li:nth-child(2) y quedarían perfectamente distribuidos............. aaaunque no va funcionar debido al display: inline-block que usas, esta propiedad deja 4px entre cada caja, mejor usa un float:left y todo va cuadrar
__________________
velarde23.com - Soluciones Web

Etiquetas: responsive, width
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 20:17.