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
.
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 originalnav {
display: table;
width: 100%;
table-layout: fixed;
}
nav ul {
display: table-row;
}
nav li {
display: table-cell;
text-align: center;
}
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: