Seleccione las entradas y las entradas de texto en HTML – ¿La mejor manera de hacer el mismo ancho?

Tengo una forma simple como esa (solo con fines ilustrativos) …

Australia USA

Mi método de diseño con CSS es el siguiente …

 form { width: 500px; } form .input-row { display: block; width: 100%; height: auto; clear: both; overflow: hidden; /* stretch to contain floated children */ margin-bottom: 10px; } form .input-row label { display: block; float: left; } form .input-row input, form .input-row select { display: block; width: 50%; float: right; padding: 2px; } 

Todo esto se alinea muy bien, excepto que mi elemento select (en Firefox de todos modos) no siempre es del mismo ancho que mis otros elementos de input . Generalmente es más estrecho por unos pocos píxeles.

He intentado cambiar el ancho a un tamaño de píxel (por ejemplo, 200px ) pero no ha marcado la diferencia.

¿Cuál es la mejor manera de conseguir que todos tengan el mismo ancho? Espero que no me cueste configurar el width las select individualmente o ponerlas en tablas …

La solución es especificar el modelo de cuadro para los elementos de formulario, y los navegadores tienden a estar más de acuerdo cuando se usa border-box:

 input, select, textarea { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 

Hay un proyecto normalize.css que agrega tales trucos.

el relleno hará que el texto esté más cerca del borde de la caja.

intente configurar el margen a 0px, y si eso parece correcto, juegue con él (como solo establecer margen-izquierda solamente)

Tenía los mismos problemas con la tabla y celdas de 100% de ancho, con un cuadro de texto (también con ancho al 100%) más ancho que la celda de la tabla.

Esto resolvió mi problema en el CSS:

 table td { padding-right: 8px; } 

No es la mejor solución de la historia, porque probablemente consigas algo de espacio adicional en el lado derecho. ¡Pero al menos ya no se esconde!