Text und Auswahlfelder in CSS auf die gleiche Breite ausrichten?

Question

Apr 03, 2012, 10:58 PM

Text und Auswahlfelder in CSS auf die gleiche Breite ausrichten?

Ok, das ist anscheinend unmöglich, richtig zu machen. Ich habe ein Textfeld und ein Auswahlfeld. Ich möchte, dass sie genau die gleiche Breite haben, damit sie am linken und rechten Rand ausgerichtet sind.

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

Das würde es tun, denkst du? Nee. Das Auswahlfeld ist in Firefox 6px kürzer. Siehe Screenshot.

Ok, also lassen Sie uns den Code bearbeiten und zwei Stile erstellen.

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

Ok das klappt

Oh warte, besser in Chrome testen ...

Kann mir jemand sagen, wie man diese in allen Browsern anordnet? Warum kann ich nicht einfach width: 200px auf allen machen, warum zeigen alle Browser es anders an? Auch wenn wir gerade dabei sind, warum sind das Textfeld und das Auswahlfeld unterschiedlich hoch? Wie bringen wir sie auf die gleiche Höhe? Habe versucht Höhe und Strichhöhe nein nein nützt nichts.

Lösung:

Ok, ich habe die Lösung mit Hilfe der folgenden Antworten gefunden. Der Schlüssel ist die Verwendung derBox-Größe: Border-Box Eigenschaft also, wenn Sie die Breite angeben, diebeinhaltet die Grenze und Polsterung. Sehenausgezeichnete Erklärung hier. Dann kann der Browser es nicht stopfen.

Code ist unten, haben auch die Höhe der Felder auf die gleiche Größe eingestellt und den Text innerhalb des Feldes eingerückt, so dass es ausgerichtet ist. Sie müssen auch den Rand festlegen, da Chrome einen wirklich seltsam aussehenden Rand hat, der für Auswahlfelder verwendet wird, die die Ausrichtung aufheben. Dies funktioniert für HTML5-Sites (z. B. mit Unterstützung für IE9, Firefox, Chrome, Safari, Opera usw.).

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

Nur eine letzte Warnung: Möglicherweise möchten Sie nicht, dass Eingabetasten, Kontrollkästchen usw. in dieses Styling einbezogen werdeninput:not([type='button']) es nicht auf bestimmte Arten oder Verwendungszwecke anzuwendeninput[type='text'], input[type='password'] um diejenigen anzugeben, auf die es angewendet werden soll.