Come ottenere la stessa larghezza di input e selezionare i campi

109

Sul modulo, ho una selezione e due campi di input. Questi elementi sono allineati verticalmente. Sfortunatamente, non riesco a 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">

Per l'esempio sopra, la larghezza migliore per l'elemento selezionato è 198 o 199 px (ovviamente ho provato 193px, ma la differenza è importante). Penso che dipenda dalla risoluzione, da vari computer e browser poiché questi elementi non hanno la stessa larghezza (a volte penso che la differenza sia di circa 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 stessa larghezza di questi elementi?

— luk4443
fonte

1

Stessa domanda qui: stackoverflow.com/questions/895904/...

— Blam

134

Risposta aggiornata

Ecco come modificare il modello di box usato dagli elementi input / textarea / select in modo che si comportino tutti allo stesso modo. È necessario utilizzare la box-sizingproprietà implementata 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 di 2px che abbiamo menzionato prima non esiste.

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

nota: su IE funziona dalla versione 8 in poi ..

Originale

se reimposti i bordi, l' selectelemento sarà sempre 2 pixel in meno rispetto agli inputelementi ..

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

— Gabriele Petrioli
fonte

Grazie per la risposta. E se imposto il bordo per 2px, ci saranno 4 pixel tra i campi di input e di selezione, per il bordo 3px - 6px ...?

— luk4443

1

@luk, no. Se sia l'ingresso che la selezione hanno la stessa larghezza del bordo, la differenza rimarrà a 2 pixel ..

— Gabriele Petrioli

Grazie. Provo il tuo codice in vari browser e in Firefox va tutto bene, ma non funziona in IE 8 e Opera (ci sono differenze tra l'input e la selezione della larghezza) :(

— luk4443

1

Forse intendevi specificare il dimensionamento della scatola: border-box? Penso che sia quello che intendevi. La casella di contenuto è l'impostazione predefinita in cui il riempimento + i margini si aggiungono alla larghezza.

— O'Rooney

1

Dovrebbe essere veramente: -ms-box-sizing: content-box; -moz-box-sizing: contenuti-box; -webkit-box-sizing: contenuti-box; box-sizing: content-box; La sintassi standard dovrebbe andare per ultima a seguire la metodologia di miglioramento progressivo in modo che in futuro, quando lo standard sarà ampiamente implementato, i programmi utente utilizzeranno per impostazione predefinita la sintassi standard e si potranno rimuovere le versioni con prefisso.

— user1739635

118

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

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

— tomsv
fonte

Sì, sembra che i campi del modulo, ad esempio: textarea, campi di input, funzionino sempre bene con il modello box border-box. Il pulsante, la casella di controllo, la radio, l'invio, il ripristino e l'input di ricerca sono per impostazione predefinita border-box.

— Vennsoh

2

Ecco un buon argomento per spiegare perché dovresti usarebox-sizing: border-box . Per una buona implementazione universale, considera l' impostazione dell'elemento html di primo livello e quindi l'ereditarietà in modo che possa essere facilmente sovrascritto.

— KyleMit

content-box non ha fatto nulla nel mio caso. Avevo bisogno del bordo-box per avere la stessa larghezza. Border-box è sicuramente la soluzione migliore, grazie.

— Manuel Hoffmann

5

Aggiungi questo codice in css:

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

— 151.291
fonte

-4

crea un'altra classe e aumenta la dimensione con l'esempio di 2px

.enquiry_fld_normal{
width:278px !important; 
}

.enquiry_fld_normal_select{
width:280px !important; 
 }

— ionMobDev
fonte