So erhalten Sie die gleiche Breite der Eingabe und wählen Felder aus

109

Auf dem Formular habe ich ein Auswahl- und zwei Eingabefelder. Diese Elemente sind vertikal ausgerichtet. Leider kann ich diese Elemente nicht gleich breit bekommen.

Hier ist mein Code:

<select name="name1" style="width:198px">
  <option>value1</option>
  <option>value2</option>
</select><br/>
<input type="text" name="id1" style="width:193px"><br/>
<input type="text" name="id2" style="width:193px">

Für das obige Beispiel beträgt die beste Breite für das ausgewählte Element 198 oder 199 Pixel (natürlich habe ich 193 Pixel ausprobiert, aber der Unterschied ist groß). Ich denke, es hängt von der Auflösung ab, von verschiedenen Computern und Browsern, da diese Elemente nicht die gleiche Breite haben (manchmal denke ich, dass der Unterschied etwa 1 oder 2 Pixel beträgt). Ich habe versucht, diese Elemente in Div- oder Tabellenzeilen festzulegen, aber es hilft nicht.

F: Wie kann ich genau die gleiche Breite dieser Elemente erhalten?

— luk4443
quelle

1

Gleiche Frage hier gestellt: stackoverflow.com/questions/895904/…

— BlaM

134

Antwort aktualisiert

Hier erfahren Sie, wie Sie das von den Eingabe- / Textbereich / Auswahlelementen verwendete Boxmodell so ändern, dass sich alle gleich verhalten. Sie müssen die box-sizingEigenschaft verwenden, die mit einem Präfix für jeden Browser implementiert ist

-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box; 
box-sizing:content-box;

Dies bedeutet, dass der zuvor erwähnte 2px-Unterschied nicht existiert.

Beispiel unter http://www.jsfiddle.net/gaby/WaxTS/5/

Hinweis: Auf IE funktioniert es ab Version 8 ..

Original

Wenn Sie ihre Ränder zurücksetzen, ist das selectElement immer 2 Pixel kleiner als die inputElemente.

Beispiel: http://www.jsfiddle.net/gaby/WaxTS/2/

— Gabriele Petrioli
quelle

Danke für die Antwort. Und wenn ich den Rand für 2px setze, gibt es 4 Pixel zwischen Eingabe- und Auswahlfeldern, für 3px Rand - 6px ...?

— luk4443

1

@ Luk, nein. Wenn sowohl Eingabe als auch Auswahl dieselbe Randbreite haben, bleibt die Differenz auf 2 Pixel.

— Gabriele Petrioli

Vielen Dank. Ich versuche Ihren Code in verschiedenen Browsern und in Firefox ist alles in Ordnung, aber es funktioniert nicht in IE 8 und Opera (es gibt Unterschiede zwischen Eingabe und Auswahl der Breite) :(

— luk4443

1

Vielleicht wollten Sie die Boxgröße angeben: Rahmenbox? Ich denke, das hast du gemeint. Das Inhaltsfeld ist die Standardeinstellung, bei der Auffüllen + Ränder die Breite erhöhen.

— O'Rooney

1

Es sollte wirklich sein: -ms-box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; Box-Größe: Content-Box; Die Standardsyntax sollte als letztes der progressiven Erweiterungsmethode folgen, damit Benutzeragenten in Zukunft, wenn der Standard weit verbreitet ist, standardmäßig die Standardsyntax verwenden und Sie die vorangestellten Versionen entfernen können.

— user1739635

118

Ich habe die Antwort von Gaby (+1) oben ausprobiert, aber mein Problem wurde nur teilweise gelöst. Stattdessen habe ich das folgende CSS verwendet, bei dem das Inhaltsfeld in ein Rahmenfeld geändert wurde:

input, select {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

— tomsv
quelle

Ja, es scheint, dass Formularfelder, z. B. Textbereich, Eingabefelder, immer gut mit dem Rahmenfeldmodell funktionieren. Schaltfläche, Kontrollkästchen, Radio, Senden, Zurücksetzen und Sucheingabe sind standardmäßig Rahmenfelder.

— Vennsoh

2

Hier ist ein gutes Argument dafür, warum Sie verwenden solltenbox-sizing: border-box . Für eine gute universelle Implementierung sollten Sie das HTML-Element der obersten Ebene festlegen und dann nach unten erben, damit es leicht überschrieben werden kann.

— KyleMit

content-box hat in meinem Fall nichts getan. Ich brauchte einen Rahmen, damit sie die gleiche Breite hatten. Border-Box ist definitiv die bessere Lösung, danke.

— Manuel Hoffmann

5

Fügen Sie diesen Code in CSS hinzu:

 select, input[type="text"]{
      width:100%;
      box-sizing:border-box;
    }

— 151291
quelle

-4

Erstellen Sie eine weitere Klasse und erhöhen Sie die Größe mit einem 2px-Beispiel

.enquiry_fld_normal{
width:278px !important; 
}

.enquiry_fld_normal_select{
width:280px !important; 
 }

— ionMobDev
quelle