css - para - formulario html ejemplo

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

Question

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 ...

Answer 1

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.

Answer 2

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!

Answer 3

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)