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

Auf dem Formular habe ich eine Auswahl und zwei Eingabefelder. Diese Elemente sind vertikal ausgerichtet. Leider kann ich nicht die gleiche Breite dieser Elemente bekommen.So erhalten Sie die gleiche Breite der Eingabe und wählen Sie Felder

mein Code hier:

<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 obiges Beispiel ist die beste Breite für ausgewähltes Element 198 oder 199 Pixel (natürlich habe ich versucht, 193px, aber der Unterschied ist major). Ich denke, es hängt von der Auflösung auf verschiedenen Computern und Browsern ab, da diese Elemente nicht die gleiche Breite haben (manchmal denke ich, dass der Unterschied etwa 1 oder 2 px ist). Ich habe versucht, diese Elemente in Div-oder Tabellenzeilen zu setzen, aber es hilft nicht.

Frage: Wie könnte ich genau die gleiche Breite dieser Elemente erhalten?

Quelle

2010-11-01 luk4443

gleiche Frage hier: http://stackoverflow.com/questions/895904/select-inputs-and-text-inputs-in-html-best-way-to-make-equal-width/899283 – BlaM

111

aktualisiert Antwort

Hier ist, wie das Box-Modell durch die Eingabe/Textarea/select Elemente verwendet zu ändern, so dass sie alle die gleiche Art und Weise verhalten. Sie müssen die box-sizing Eigenschaft verwenden, die mit einem Präfix für jeden Browser

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

Das bedeutet, umgesetzt wird, dass die 2px Unterschied, den wir bereits erwähnt gibt es nicht ..

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

Hinweis:Auf IE funktioniert es von Version 8 und aufwärts ..

Original-

, wenn Sie ihre Grenzen zurückgesetzt dann das select Element immer zwei Pixel kleiner sein als die input Elemente ..

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

Quelle

2010-11-01 23:09:43

Danke für den Kauf y. Und wenn ich Grenze für 2px einstelle, gibt es 4 Pixel zwischen Eingangs- und Auswahlfeldern, für 3px Grenze - 6px ...? – luk4443

@luk, nein. Wenn sowohl Eingabe als auch Auswahl die gleiche Rahmenbreite haben, bleibt die Differenz auf 2 Pixel. –

Danke. 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 Breite wählen) :( – luk4443

ich Gaby Antwort versucht (+1) oben, aber es hat mein Problem nur teilweise gelöst. Stattdessen habe ich die folgende CSS, wo Content-Box zu border-Box geändert wurde:

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

Quelle

2011-05-05 09:26:53 tomsv

+21

) Funktioniert besser als die angenommene Antwort – cguedel

Yup, es scheint, dass Formularfelder zB: textarea, Eingabefelder immer gut mit dem border-box box model funktionieren. button, checkbox, radio, submit, reset und search eingabe sind standardmäßig border-box. – Vennsoh

Weitere Informationen: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing – JorgeeFG

diesen Code in CSS hinzufügen:

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

Quelle

2015-08-08 09:50:24 151291

-3

eine andere Klasse erstellen und mit 2px Beispiel die mit der Größe erhöhen

.enquiry_fld_normal{ 
width:278px !important; 
} 

.enquiry_fld_normal_select{ 
width:280px !important; 
}

Quelle

2016-01-07 11:03:48 yousuf

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

Antwort

Verwandte Themen