相关疑难解决方法(0)

我有一个像这样的简单形式(仅用于说明目的)......

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

这一切都很好地对齐,除了我的select元素(无论如何在Firefox中)并不总是与我的其他input元素相同的宽度.它通常比几个像素窄.

我已经尝试将宽度更改为像素大小(例如 …

在CSS中设置某些元素的宽度(在这种情况下为200px)时,我注意到了一些有趣的东西,即表单中的"select"元素.似乎select元素总是有点太窄,因此我的表单中的输入不一致.这是一个例子(截图来自chrome,但这也发生在IE中).

css是这样的:

input { width: 200px; }
select {width: 200px; }

和相关的小提琴

它并没有那么多打扰我,但是我能做些什么才能可靠地解决这个问题？