¿Alineando texto y seleccionando cuadros al mismo ancho en CSS?

Question

Apr 03, 2012, 10:58 PM

¿Alineando texto y seleccionando cuadros al mismo ancho en CSS?

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.

<code><!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>
</code>

Eso lo harías tú crees, ¿no? No El cuadro de selección es 6px más corto en Firefox. Ver captura de pantalla.

Ok así que vamos a editar el código y hacer dos estilos.

<code><style type="text/css">
    input {
        width: 200px;
    }
    select {
        width: 206px;
    }
</style>
</code>

Ok eso funciona!

Oh, espera, mejor prueba en Chrome ...

¿Puede alguien decirme cómo alinear estos en todos los navegadores? ¿Por qué no puedo simplemente hacer ancho: 200px en todos, 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 alturas diferentes? ¿Cómo los conseguimos a la misma altura? Han intentado la altura y la línea de altura sin ningún provecho.

Solución:

Ok, he encontrado la solución con un poco de ayuda de las respuestas a continuación. La clave es usar eltamaño de caja: cuadro de borde propiedad por lo que cuando se especifica el ancho queincluye El borde y el relleno. Verexcelente explicación aquí. Entonces el navegador no puede rellenarlo.

El código está debajo, también ha establecido la altura de los cuadros en el mismo tamaño y ha sangrado 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 los cuadros de selección que eliminarán la alineación. Esto funcionará para sitios HTML5 (por ejemplo, con compatibilidad con IE9, Firefox, Chrome, Safari, Opera, etc.).

<code><!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>
</code>

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 elinput:not([type='button']) No aplicarlo a ciertos tipos o uso.input[type='text'], input[type='password'] para especificar los que desea aplicar.