[SOLUCIONADO] Ancho de las etiquetas

[mblascog]

Buenas,
Tengo entendido que el ancho de una etiqueta viene determinado por el borde derecho, el izquierdo y el ancho de la propia etiqueta.
Partiendo de esto, tengo montado un menú con 5 opciones, el width de cada opción es el 20% y padding izquierdo y derecho lo tengo a 0.
Según este ejemplo, veo lo siguiente:
ul: 1024px de ancho
li: 205px de ancho. Aquí está el problema. El 20% de 1024 es 204.8 por lo que al redondearlo la última opción salta de linia.
Se puede ver el ejemplo en: http://www.tepui.cat/foro/index.php
El código css para el menú es:

Código CSS:

nav ul li{background:gray;display:inline-block;font-size:.9em;width:20%;text-align:center;padding-top:0.5%;padding-bottom:0.5%;padding-right:0; padding-left:0;margin:0;border:0;height:25px;}
 

Muchas gracias

[pzin]

Iniciado por mblascog

Tengo entendido que el ancho de una etiqueta viene determinado por el borde derecho, el izquierdo y el ancho de la propia etiqueta.

Por defecto si. Pero puedes cambiar el modelo de caja para que tanto el borde como el relleno formen parte del ancho y alto del elemento usando box-sizing. Yo suelo poner en mi reset un coso así:

Código CSS:

* {
  box-sizing: border-box;
}
 

Así te vas a ahorrar calcular muchas cosas.

[mblascog]

Gracias pzin,
He probado box-sizing tanto en nav, como nav ul, como nav ul li y hace exactamente lo mismo.

Se te ocurre otra cosa?
Gracias

[mblascog]

Ya he visto porqué la 5ª opción salta a la linea siguiente.
He cambiado el fondo de las opciones, y veo que hay un par de píxeles entre opción y opción.
Tengo que averiguar porqué se crea este espacio, ya que tengo todos los paddings, margins, borders, ... a 0

[mblascog]

Lo he resuelto añadiendo float:left en nav ul li
Gracias

[siddartha23]

Iniciado por mblascog

Ya he visto porqué la 5ª opción salta a la linea siguiente.
He cambiado el fondo de las opciones, y veo que hay un par de píxeles entre opción y opción.
Tengo que averiguar porqué se crea este espacio, ya que tengo todos los paddings, margins, borders, ... a 0

Ese espacio de 4px se crea cuando usas la propiedad display:inline-block y dejas espacios entre los objetos html que tienen esa propiedad, la solución mas elegante y funcional en todos los navegadores es comentar los espacios en blanco que dejas entre cada item en tu html, de esta manera:

Código HTML:

 <li>...</li><!--
--><li>...</li><!--
--><li>...</li><!--
--><li>...</li> 

Existen otras soluciones como por ejemplo ponerles un margin-left negativo de -4px pero no lo recomiendan por que "cierto navegador" podría montar tus items unos encimas de otros, bueno, eso de comentar los espacios aunque no tenga sentido sí que funciona ...

[mblascog]

Gracias siddartha23, muy buena la sugerencia. No había leído nada de esto.