Seleziona input e input di testo in HTML: il modo migliore per ottenere una larghezza uguale?

Question

Ho una forma semplice come (solo a scopo illustrativo) in modo ...

<form> 

    <div class="input-row"> 
     <label>Name</label> 
     <input type="text" name="name" /> 
    </div> 

    <div class="input-row"> 
     <label>Country</label> 
     <select name="country"> 
     <option>Australia</option> 
     <option>USA</option> 
     </select> 
    </div> 

</form> 

Il mio metodo di layout con i CSS è la seguente ...

form { 
    width: 500px; 
} 

form .input-row { 
    display: block; 
    width: 100%; 
    height: auto; 
    clear: both; 
    overflow: hidden; /* stretch to contain floated children */ 
    margin-bottom: 10px; 
} 

form .input-row label { 
    display: block; 
    float: left; 
} 

form .input-row input, 
form .input-row select { 
    display: block; 
    width: 50%; 
    float: right; 
    padding: 2px; 
} 

Questo tutti allinea abbastanza bene, ad eccezione del mio elemento select (comunque in Firefox) non è sempre la stessa larghezza degli altri elementi input. In genere è più stretto di pochi pixel.

Ho provato a cambiare la larghezza in una dimensione in pixel (ad esempio 200px) ma non ha fatto la differenza.

Qual è il modo migliore per ottenere che tutti abbiano la stessa larghezza? Spero che non ricorra a me impostando i width di select singolarmente o inserendoli nelle tabelle ...

Answer 1

La soluzione è quella di specificare il modello di dialogo per gli elementi di forma, e browser tendenzialmente d'accordo la maggior parte quando si utilizza border-box:

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

---

C'è normalize.css progetto che aggrega questi trucchi.

Answer 2

il padding renderà il testo più vicino al bordo della casella.

provare l'impostazione del margine 0px, e se questo sembra giusto, giocare con essa (come solo impostando margin-left solo)

Answer 3

Aveva gli stessi problemi con la tabella e le celle con larghezza del 100%, con una casella di testo (anch'essa con larghezza al 100%) più ampia della cella della tabella.

Questo risolto il problema nel css:

table td 
{ 
    padding-right: 8px; 
} 

Non è la soluzione migliore in assoluto, perché probabilmente si ottiene qualche ulteriore spazio sul lato destro. Ma almeno non si nasconde più!