css - 如何将选择与 JQuery 按钮垂直对齐？

Question

我确信有一个简单的解决方案，但到目前为止我还没有找到它，我正准备把我的电脑扔出窗外。

任何想法如何将选择与 jQuery 按钮垂直对齐，其中按钮高度大于选择的高度。像这样：

http://jsfiddle.net/hCCzQ/4/

我正在尝试对齐它们，以便选择位于按钮的中间。

非常感谢！

Answer 1

这对我很有效：

select, button {
    vertical-align: middle;
}
​

演示：http: //jsfiddle.net/hCCzQ/6/

Answer 2

试试这个：

http://jsfiddle.net/oscarj24/5FL4a/

 $(document).ready(function() {

  var b = $("#abutton");
  var s = $('select');   

  $(b, s).css('vertical-align', 'middle');
 });

---

使用 @jnylen 帖子中带有 CSS 样式的类：

JS：

$(document).ready(function() {
    var b = $("#abutton");
    var s = $('select');   

    b.addClass('btn');
    s.addClass('ddl');
});

CSS：

.btn {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 32px;
    vertical-align: middle;
}

.ddl {
    margin: 0;
    padding: 0;
    position: relative;
    top: 2px;
    vertical-align: middle;
}​

​</p>

Answer 3

这是我能找到使其像素完美的唯一方法：

button {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 32px;
    vertical-align: middle;
}

select {
    margin: 0;
    padding: 0;
    position: relative;
    top: 2px;
    vertical-align: middle;
}

演示：http: //jsfiddle.net/hCCzQ/12/

它在 Firefox 和 IE7 中看起来不错。