Eingaben und Texteingaben in HTML auswählen - Der beste Weg, um die gleiche Breite zu erreichen?

Ich habe eine einfache Form wie diese (nur zur Veranschaulichung) ...

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

Meine Layoutmethode mit CSS lautet 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 passt sehr gut zusammen, außer dass mein selectElement (in Firefox sowieso) nicht immer die gleiche Breite wie meine anderen inputElemente hat. Sie ist in der Regel 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 auf die gleiche Breite zu bringen? Ich hoffe, es geht nicht darum, dass ich die select's widtheinzeln einstelle oder sie in Tabellen stelle ...

Die Lösung besteht darin, ein Boxmodell für Formularelemente anzugeben, und Browser stimmen in der Regel am meisten überein, wenn Sie Border-Box verwenden:

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

Es gibt ein normalize.css- Projekt, das solche Tricks zusammenfasst.

Durch Auffüllen wird der Text näher am Rand des Felds angezeigt.

Versuchen Sie, den Rand auf 0px zu setzen, und wenn dies richtig erscheint, spielen Sie damit herum (wie wenn Sie nur den Rand nur links einstellen).

Hatte die gleichen Probleme mit Tabellen und Zellen mit 100% Breite, mit einem Textfeld (auch mit einer Breite von 100%), das breiter als die Tabellenzelle war.

Dies löste mein Problem in der CSS:

table td
{
    padding-right: 8px;
}

Nicht die beste Lösung aller Zeiten, da Sie wahrscheinlich zusätzlichen Platz auf der rechten Seite haben. Aber zumindest versteckt es sich nicht mehr!