Ok, das scheint unmöglich unmöglich zu sein. Ich habe ein Textfeld und ein Auswahlfeld. Ich möchte, dass sie genau die gleiche Breite haben, damit sie am linken und am rechten Rand ausgerichtet sind.
<!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>Das würdest du denken, oder? Nee. Das Auswahlfeld ist in Firefox 6 Pixel kürzer. Siehe Screenshot.
Ok, also lassen Sie uns den Code bearbeiten und zwei Stile erstellen.
<style type="text/css">
input {
width: 200px;
}
select {
width: 206px;
}
</style>Ok das funktioniert!
Oh warte, besser in Chrome testen ...
Kann mir jemand sagen, wie ich diese in allen Browsern ausrichten soll? 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 Linienhöhe ohne Erfolg.
Lösung:
Ok, ich habe die Lösung mit Hilfe der folgenden Antworten gefunden. Der Schlüssel besteht darin, die Eigenschaft box-sizing: border-box zu verwenden , wenn Sie die Breite angeben, die den Rand und den Abstand enthält. Siehe ausgezeichnete 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 so eingerückt, dass er ausgerichtet ist. Sie müssen auch den Rahmen festlegen, da Chrome einen wirklich seltsam aussehenden Rand hat, der für Auswahlfelder verwendet wird, die die Ausrichtung verwerfen. Dies funktioniert für HTML5-Sites (z. B. Unterstützung von IE9, Firefox, Chrome, Safari, Opera usw.).
<!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>Nur eine letzte Warnung: Sie möchten möglicherweise nicht, dass Eingabeschaltflächen, Kontrollkästchen usw. in diesem Stil enthalten sind. Verwenden Sie daher die Option, um input:not([type='button'])sie nicht auf bestimmte Typen anzuwenden, oder verwenden Sie input[type='text'], input[type='password'], um diejenigen anzugeben, auf die sie angewendet werden sollen.