Ok, esto es aparentemente imposible de hacer bien. Tengo un cuadro de texto y un cuadro de selección. Quiero que tengan exactamente el mismo ancho para que se alineen en el margen izquierdo y el margen derecho.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
input, select {
width: 200px;
}
</style>
</head>
<body>
<input type="text" value="ABC"><br>
<select>
<option>123</option>
</select>
</body>
</html>
Eso es lo que piensas, ¿verdad? No El cuadro de selección es 6px más corto en Firefox. Ver captura de pantalla.
Ok, editemos el código y creemos dos estilos.
<style type="text/css">
input {
width: 200px;
}
select {
width: 206px;
}
</style>
Ok eso funciona!
Oh, espera, mejor prueba en Chrome ...
¿Alguien puede decirme cómo alinearlos en todos los navegadores? ¿Por qué no puedo simplemente hacer ancho: 200 px en total, por qué todos los navegadores lo muestran de manera diferente? Además, mientras estamos en eso, ¿por qué el cuadro de texto y el cuadro de selección tienen diferentes alturas? ¿Cómo los conseguimos a la misma altura? He probado la altura y la altura de la línea en vano.
Solución:
Ok, encontré la solución con la ayuda de las respuestas a continuación. La clave es usar la propiedad box-sizing: border-box para cuando especifique el ancho que incluye el borde y el relleno. Vea una excelente explicación aquí . Entonces el navegador no puede rellenarlo.
El código está debajo, también establecí la altura de los cuadros al mismo tamaño y sangré el texto dentro del cuadro para que se alinee. También debe establecer el borde, ya que Chrome tiene un borde de aspecto realmente extraño que usa para seleccionar cuadros que eliminarán la alineación. Esto funcionará para sitios HTML5 (por ejemplo, compatibles con IE9, Firefox, Chrome, Safari, Opera, etc.).
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
input, select {
width: 200px;
border: 1px solid #000;
padding: 0;
margin: 0;
height: 22px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
input {
text-indent: 4px;
}
</style>
</head>
<body>
<input type="text" value="ABC"><br>
<select>
<option>123</option>
<option>123456789 123123123123</option>
<option>123456789 123123123123 134213721381212</option>
</select>
</body>
</html>
Solo una advertencia final: es posible que no desee que se incluyan botones de entrada, casillas de verificación, etc.en este estilo, así que use input:not([type='button'])para no aplicarlo a ciertos tipos o input[type='text'], input[type='password']para especificar aquellos a los que sí desea que se aplique.
fuente
Respuestas:
Esto se debe a que el
<input type="text" />elemento tiene un estilo predeterminado ligeramente diferente al del<select>elemento, por ejemplo, los valores de borde, relleno y margen pueden ser diferentes.Puede observar estos estilos predeterminados a través de un inspector de elementos como Firebug para Firefox o el integrado para Chrome. Además, estas hojas de estilo predeterminadas difieren de un navegador a otro.
Tienes dos opciones:
Yo optaría por la opción 1. porque la opción 2. requiere mucho trabajo y terminará con toneladas de CSS innecesario. Pero algunos desarrolladores web prefieren empezar desde cero y tener el control total.
fuente
padding:0; margin:0; border:1px solid #000;que hace que el ancho del texto / cuadros de selección se alinee bien. Sin embargo, si observa el texto dentro de los dos cuadros, notará que el texto en el cuadro de selección se rellena más. Casi es necesario agregar otroinput { padding-left: 5px; }estilo específico después del primero en corregir. ¿Algunas ideas? Usé un restablecimiento de CSS en el sitio que estaba construyendo antes de hacer este código de prueba básico, pero el problema aún estaba presente allí. El restablecimiento de CSS aparentemente no solucionó este problema específico de ancho de cuadro de texto / selección.input {text-indent: 5px;}PS, la<select>etiqueta es muy rígida y específica del sistema operativo; ignorará una gran cantidad de CSS.Esto lo acercará, pero ese nivel de precisión es casi imposible.
<div style="width: 200px"><input type="text" style="width: 100%; margin: 0; padding: 0" /></div> <div style="width: 200px"> <select id="Select1" style="width: 100%; margin: 0; padding: 0"> <option>1</option> </select> </div>fuente
Los diferentes navegadores aplican diferentes estilos de forma predeterminada. Descubrí que restablecer tanto el margen como el relleno a 0 hace que ambos elementos tengan el mismo ancho en Firefox y Chrome.
<html> <head> <title>Test</title> <style type="text/css"> input, select { margin: 0; padding: 0; width: 200px; } </style> </head> <body> <input type="text" value="ABC"><br /> <select> <option>123</option> </select> </body> </html>Personalmente, me gusta usar una hoja de estilo de restablecimiento de CSS mínimo como YUI CSS Reset antes de intentar que un diseño se vea bien en varios navegadores.
fuente
input { padding-left: 5px; }. ¿Es esa la forma correcta de hacerlo? He utilizado un restablecimiento de CSS en el sitio que estaba construyendo antes de hacer este código de prueba básico, pero el problema seguía presente allí. El restablecimiento de CSS no solucionó este problema específico de ancho de cuadro de texto / selección.inputy losselectelementos sea algo que valga la pena, considerando todo. Conseguir que los bordes exteriores de estos elementos se alineen se ve bastante bien, estéticamente.Agregue una clase a las etiquetas de entrada y selección en cuestión, es decir:
<input class='custom-input'/> <select class='custom-input'></select>luego modifique el CSS a continuación para que se ajuste a su diseño:
.custom-input { width:140px; border:1px solid #ccc; margin:1px; padding:3px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; }obvs, esta es una solución para los navegadores compatibles
fuente
Si usa tablas de 4 entradas, podría usar la siguiente solución, también compatible con ie7:
<tr style="width:1px;"><td style="width:inherit;position:relative;"> <select style="width:100%;"> </select> </td></tr> <tr><td> <input type="text" style="width:150px;"/> </td></tr>De esa manera, el ancho de la celda de la tabla se fijará al ancho de la entrada,
Y de esa manera, la selección siempre tomaría el ancho restante y se alinearía perfectamente con la entrada d.
fuente
Intente eliminar los bordes predeterminados de ambos elementos:
select, input { border:0; }fuente
Sí, extremadamente frustrante. Sin embargo, nunca tuve problemas con eso hasta que puse una etiqueta "<! DOCTYPE html>" en la parte superior de mi página HTML. Mi página web se procesó correctamente en todas las plataformas que pude probar hasta que coloqué esa etiqueta en la parte superior de mi documento.
Si bien es una "especificación genuina", parece ser la fuente de estos problemas de alineación. FWIW, estoy usando elementos HTML5, CSS en línea, etc., todo sin esa etiqueta para especificar HTML5. YMMV.
fuente