Css 将选择元素与按钮元素绑定

如何将select元素与button元素绑定在一起，并使其在不同的浏览器中保持响应

这就是它在Chrome中的外观

即

但在Firefox中看起来是这样的…

我尝试添加一个div容器并将这两个元素都放在里面，但没有任何区别

我的css如下所示：

select
{
    height: 30px;
    font-size: 14px;
    border: 1px solid #182A40;
    margin: 0 0 20px 20px;
}

button
{
    height: 30px;
    width: 35px;
    font-size: 14px;
    border: 1px solid #182A40;
    margin: 0;
}

看看这是否有帮助-

HTML:

---

你能安装一个JSFIDLE演示吗？看看这里：你需要做一些特定于浏览器的CSS。无法在Firefox 27.0.1上重新创建@莫菲斯：JSFIDLE有问题吗？我第一次用它。看起来如果你去掉按钮里面的“go”这个词，问题就消失了。添加

vertical align:top

可以修复对齐方式，但文本不是内联的。

<div class="rap">
 <select> 
  <option>test1</option>
  <option>test2</option>
  <option>test3</option>
 </select>
 <input type="button" value="go"/>
</div>

div.rap {
  height: 30px;
}

select {
  vertical-align: bottom;
  margin: 0;
  padding: 0;
}

input {
  vertical-align: bottom;
  margin: 0;
  padding: 0;
}