Ver Mensaje Individual
  #2 (permalink)  
Antiguo 03/12/2013, 02:49
Avatar de pzin
pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 6 meses
Puntos: 2114
Respuesta: divs autoadaptables ?

Bueno, lo primero sería cambiar la estructura HTML, no porque no se pueda hacer sin cambiarla, sino porque enlaces agrupados deberían de ponerse en una lista desordenada con ul.

Código HTML:
Ver original
  1. <nav>
  2.   <ul>
  3.     <li><a href="#">enlace</a></li>
  4.     <li><a href="#">enlace</a></li>
  5.     <li><a href="#">enlace</a></li>
  6.     <li><a href="#">enlace</a></li>
  7.     <li><a href="#">enlace</a></li>
  8.   </ul>
  9. </nav>

Después respecto al CSS, tienes que poner una estructura como si esos elementos fueran tablas con display: table/table-row/table-cell. Y para que cada elemento de la lista tenga el mismo ancho, tienes que fijar la estructura de la tabla con table-layout.

Código CSS:
Ver original
  1. nav {
  2.   display: table;
  3.   width: 100%;
  4.   table-layout: fixed;
  5. }
  6. nav ul {
  7.   display: table-row;
  8. }
  9. nav li {
  10.   display: table-cell;
  11.   text-align: center;
  12. }

Si adicionalmente quieres que los enlaces siempre ocupen todo el ancho dentro del elemento de la lista, entonces elimina el centrado de texto anterior quitando text-align (más que nada porque no hace falta) y creas otra regla para los enlaces para que se visualicen como elementos de bloque:

Código CSS:
Ver original
  1. nav li a {
  2.   display: block;
  3. }