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

我的布局方法使用CSS如下…

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

这一切都很好对齐，除了我的选择元素(在Firefox中)不总是与我的其他输入元素相同的宽度。它通常窄几个像素。

我试着将宽度改为像素大小(例如200像素)，但它没有起到什么作用。

什么是最好的方法来获得这些都具有相同的宽度？我希望它不诉诸于我单独设置选择的宽度，或将它们放入表…