Wählen Sie Eingaben und Texteingaben in HTML - die beste Möglichkeit, um die gleiche Breite zu machen?

Question

Ich habe ...

wie so (nur zur Veranschaulichung) eine einfache Form bekam

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

Mein Layout-Methode unter Verwendung von CSS ist wie folgt ...

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; 
} 

dies alles ganz schön ausrichtet, außer meinem select Element (in Firefox sowieso) ist nicht immer die gleiche Breite wie meine anderen input Elemente. Im Allgemeinen ist es um einige Pixel schmaler.

Ich habe versucht, die Breite auf eine Pixelgröße (z. B. 200px) zu ändern, aber es hat keinen Unterschied gemacht.

Was ist der beste Weg, um diese alle gleich breit zu bekommen? Ich hoffe, dass es mir nicht zurückgreifen width die select ‚s Einstellung einzeln oder sie in Tabellen setzen ...

Answer 1

Die Lösung ist für Formularelemente Box-Modell zu spezifizieren und Browser eher zustimmen am meisten, wenn Sie verwenden border-Box:

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

---

Es gibt normalize.css Projekt, das solche Tricks aggregiert.

Answer 2

Polsterung wird der Text näher an den Rand der Box machen.

versuchen Einstellung der Marge auf 0px, und wenn das richtig scheint, mit ihm spielen, um (wie gerade Einstellung margin-left nur)

Answer 3

Hatte die gleichen Probleme mit 100% Breite Tabelle und Zellen, mit einem Textfeld (auch mit der Breite bei 100%) breiter als die Tabellenzelle.

Dies löste mein Problem in der CSS:

table td 
{ 
    padding-right: 8px; 
} 

nicht die beste Lösung überhaupt, weil du wahrscheinlich einigen zusätzlichen Platz auf die rechte Seite bekommen. Aber wenigstens versteckt es sich nicht mehr!