使用按钮元素绑定选择元素

Question

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

这就是它在Chrome中的外观

在I.E 。

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

http://jsfiddle.net/jsFiddler123/Sgyjz/

Answer 1

看看这是否有帮助 - http://codepen.io/simonmoon/pen/Kehxi

HTML：

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

CSS：

div.rap {
  height: 30px;
}

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

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