Come ottenere uguale larghezza di input e selezionare i campi

Question

Nel modulo, ho un campo di selezione e due di input. Questi elementi sono allineati verticalmente. Sfortunatamente, non riesco ad ottenere la stessa larghezza di questi elementi.

Ecco il mio codice:

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

Ad esempio precedente, la larghezza migliore per selezionare elemento è 198 o 199 px (ovviamente ho provato 193px, ma la differenza è maggiore). Penso che dipenda dalla risoluzione, da vari computer e browser poiché questi elementi non hanno larghezza uguale (a volte penso che la differenza sia di 1 o 2 px). Ho provato a impostare questi elementi in div o righe di tabella, ma non aiuta.

D: Come posso ottenere esattamente la larghezza uguale di questi elementi?

Answer 1

risposta Aggiornato

Ecco come cambiare il modello di dialogo utilizzata dai/textarea/elementi selezionati in ingresso in modo che tutti si comportano allo stesso modo. È necessario utilizzare la proprietà box-sizing che viene realizzato con un prefisso per ogni browser

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

Ciò significa che la differenza 2px abbiamo accennato in precedenza non esiste ..

esempio a http://www.jsfiddle.net/gaby/WaxTS/5/

nota:su IE funziona a partire dalla versione 8 e verso l'alto ..

---

originale

se si reimposta loro confini quindi l'elemento select sarà sempre di 2 pixel inferiore ai input elementi ..

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

Answer 2

ho cercato la risposta di Gaby (+1) sopra, ma ha risolto solo parzialmente il mio problema. Invece ho usato il seguente CSS, in cui il contenuto-box è stato cambiato a border-box:

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

Answer 3

aggiungere questo codice in css:

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

Answer 4

creare un'altra classe e aumentare la con dimensioni con 2px esempio

.enquiry_fld_normal{ 
width:278px !important; 
} 

.enquiry_fld_normal_select{ 
width:280px !important; 
}