css - para - formulario html ejemplo
Seleccione las entradas y las entradas de texto en HTML-¿La mejor manera de hacer el mismo ancho? (3)
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.
Tengo una forma simple como esa (solo con fines ilustrativos) ...
<form>
<div class="input-row">
<label>Name</label>
<input type="text" name="name" />
</div>
<div class="input-row">
<label>Country</label>
<select name="country">
<option>Australia</option>
<option>USA</option>
</select>
</div>
</form>
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 ...
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!
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)