¿Cómo agrego un borde de 1px a un div cuyo ancho es un porcentaje?

Tengo este jsfiddle http://jsfiddle.net/tara_irvine/DZLTJ/1/ que explica mi problema.¿Cómo agrego un borde de 1px a un div cuyo ancho es un porcentaje?

Quiero que los elementos del menú en la parte superior sean el 20% de la ventana, pero también quiero que tengan un borde derecho de 1px.

Como puede ver, está ligeramente fuera, esto es muy notable.

---------------------------------------------- 
| menu 1 | menu 2 | menu 3 | menu 4 | menu 5 | 
---------------------------------------------- 
|   row one needs to be same   |  
----------------------------------------------

No creo que un límite de porcentaje funcionaría porque entonces no sería consistente con los diferentes tamaños de ventana.

¿Alguien tiene alguna sugerencia sobre cómo puedo lograr esto?

Fuente

2011-11-26 Tara Irvine

Su violín no funciona para mí. El quinto elemento del menú se ajusta a una segunda línea. – dnuttle

Yo también, pero en anchos más altos está bien. El problema que veo tiene más que ver con 1px + 20% + 1px + 20% + 1px + 20% + 1px + 20% + 1px + 20% + 1px> 100%. Es por eso que la mayoría de las veces diseño mi sitio para un ancho de pantalla mínimo y luego centro todo el contenido. – Zoidberg

Para ello se puede utilizar CSS para este box-sizing:

así:

#nav_1232938 li, .row { 
    -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
      box-sizing: border-box; 
}

Fuente

2011-11-26 12:59:13 sandeep

¡no puedo creer que esta respuesta exista! Pensé que flota + fronteras> fronteras = ERROR, reputación ++ – cwiggo

Me acabo de encontrar con un proyecto en el que tenía que hacer lo mismo. Aunque el tamaño de la caja es probablemente la mejor respuesta, decidí usar elementos generados después de (debido a algunos problemas específicos de mi proyecto).

Configuré el li's (ancho + relleno) x número de li's igual al 100%, luego posición absoluta 12px ancho, 100% altura li: después elementos arriba: 0, derecha: -6px; de cada li. Li: last-child flotó hacia la derecha para que siempre quede alineado con las casillas inferiores (los navegadores calculan porcentajes de píxeles fraccionales de porcentajes diferentes, por lo que a veces tienes un espacio en el extremo derecho de los elementos flotantes, incluso si el ancho de los elementos hasta 100%), y li: last-child: after se configuró para mostrar: none.

Aquí es una edición de su js violín como un ejemplo: http://jsfiddle.net/DZLTJ/12/

Notas: En mi página, el relleno situado en% nunca sería más pequeño que el: después de la anchura del elemento situado en píxeles, por lo que el cuadro de contenido sería nunca ser oscurecido

Tamaño de caja y: después son compatibles en todos los navegadores post ie 7, pero: last-child en realidad tiene menos soporte, es decir 8. Como he dicho, el tamaño de caja es probablemente una mejor opción, pero en mi caso el elemento posicionado después de colocarse en una posición mejor, pensó que sería útil mencionarlo en caso de que fuera para otra persona también.

Fuente

2012-02-15 05:39:11 RobW

Años después: use el tamaño de la caja. – RobW

Para la frontera, puede utilizar

outline: 1px solid black;

esto funciona en todos los navegadores modernos, pero no en IE6 y 7

Fuente

2012-02-20 12:30:18 Jorre

¿Cómo agrego un borde de 1px a un div cuyo ancho es un porcentaje?

Respuesta

Cuestiones relacionadas