Hoe krijg ik een gelijke breedte van invoer en selecteer velden

Op het formulier heb ik één selectie- en twee invoervelden. Deze elementen zijn verticaal uitgelijnd. Helaas krijg ik geen gelijke breedte van deze elementen.

Hier is mijn 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">

Voor het bovenstaande voorbeeld is de beste breedte voor het geselecteerde element 198 of 199 px (natuurlijk heb ik 193px geprobeerd, maar het verschil is groot). Ik denk dat het afhangt van de resolutie, op verschillende computers en browsers, omdat deze elementen niet dezelfde breedte hebben (soms denk ik dat het verschil ongeveer 1 of 2 px is). Ik heb geprobeerd deze elementen in div- of tabelrijen in te stellen, maar het helpt niet.

V: Hoe kan ik precies dezelfde breedte van deze elementen krijgen?

Antwoord 1, autoriteit 100%

Bijgewerkt antwoord

Hier leest u hoe u het boxmodel dat wordt gebruikt door de invoer/tekstgebied/selecteer-elementen kunt wijzigen, zodat ze zich allemaal op dezelfde manier gedragen. U moet de eigenschap box-sizinggebruiken die is geïmplementeerd met een voorvoegsel voor elke browser

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

Dit betekent dat het verschil van 2px dat we eerder noemden niet bestaat..

voorbeeld op http://www.jsfiddle.net/gaby/WaxTS/5/

opmerking:Op IE werkt het vanaf versie 8 en hoger..

Origineel

als je hun grenzenopnieuw instelt, dan zal het selectelement altijd 2 pixels minder zijn dan de inputelementen..

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

Antwoord 2, autoriteit 89%

Ik heb Gaby’s antwoord (+1) hierboven geprobeerd, maar het loste mijn probleem slechts gedeeltelijk op. In plaats daarvan gebruikte ik de volgende CSS, waarbij content-box werd gewijzigd in border-box:

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

Antwoord 3, autoriteit 6%

Voeg deze code toe in css:

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

Antwoord 4

Stel eerst de breedte van elk element gelijk in, in uw geval de breedte 193px of 198px. Dan kun je er hieronder een volgen.

a. voeg deze regel toe
box-sizing: border-box;
in de stijl van u selecteert en invoert. net als style="width:198px; box-sizing: border-box;"

of

b. voeg deze regels toe aan je CSS (extern op interne CSS, wat je ook gebruikt).

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

Antwoord 5

maak een andere klasse en vergroot de met grootte met 2px
voorbeeld

.enquiry_fld_normal{
width:278px !important; 
}
.enquiry_fld_normal_select{
width:280px !important; 
 }