html - insertar - Alinear texto y seleccionar cuadros con el mismo ancho en CSS?
ejemplos de cajas de texto en html (7)
Agregue una clase a las etiquetas de selección e ingreso 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 soportar navegadores
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, por lo que se alinean 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 lo haría, ¿verdad? Nop. El cuadro de selección es 6 veces 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, prueba mejor en Chrome ...
¿Puede alguien decirme cómo alinear estos en todos los navegadores? ¿Por qué no puedo hacer ancho: 200 píxeles en todos, ¿por qué todos los navegadores lo muestran de manera diferente? Además, mientras estamos en ello, ¿por qué el cuadro de texto y el cuadro de selección tienen alturas diferentes? ¿Cómo los hacemos llegar a la misma altura? He intentado con la altura y la altura de la línea sin éxito.
Solución:
Ok, he encontrado la solución con alguna ayuda de las respuestas a continuación. La clave es usar la propiedad box-sizing: border-box así que cuando especifique el ancho que incluye el borde y el relleno. Vea una excelente explicación aquí . Entonces el navegador no puede llenarlo.
El código está debajo, también ha establecido el alto de las casillas del 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 utiliza para seleccionar cuadros que arrojarán la alineación. Esto funcionará para sitios HTML5 (por ejemplo, compatible 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 incluir botones de entrada, casillas de verificación, etc. en este estilo, así que use la input:not([type=''button'']) para no aplicarlo a ciertos tipos o use input[type=''text''], input[type=''password''] para especificar los que desea que se apliquen.
Esto se debe a que el elemento <input type="text" /> tiene un estilo por defecto ligeramente diferente al elemento <select> , 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 incorporado para Chrome. Además, estas hojas de estilo predeterminadas difieren de un navegador a otro.
Tienes dos opciones:
- Establecer explícitamente que los valores de borde, relleno y margen sean los mismos para ambos elementos
- Una hoja de estilo de restablecimiento CSS para incluir antes de sus propias hojas de estilo CSS
Me gustaría ir con la opción 1. porque la opción 2. requiere mucho trabajo y terminarás con toneladas de CSS innecesarios. Pero algunos desarrolladores web prefieren comenzar desde cero y tener un control total.
Esto te 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>
Intente eliminar los bordes predeterminados de ambos elementos:
select, input {
border:0;
}
Los diferentes navegadores aplican diferentes estilos por defecto. Descubrí que restablecer el margen y 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 utilizar una hoja de estilo de restablecimiento de CSS mínima como YUI CSS Reset antes de intentar hacer que un diseño se vea genial en varios navegadores.
Sí, extremadamente frustrante. Sin embargo, nunca tuve problemas con eso hasta que coloque 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 coloque esa etiqueta en la parte superior de mi documento.
Si bien eso es "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.
Si utiliza las entradas de las tablas 4, 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 esta forma, el ancho de la celda de la tabla se fijará al ancho de la entrada,
Y de esa forma, la selección siempre tomaría el ancho restante y se alinearía perfectamente con la entrada d.