Question

我确信这有一个简单的解决方案，但到目前为止我还没有找到它，而且我准备把PC扔到窗口了。

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

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

非常感谢！

Answer 1

这对我很有用：

select, button {
    vertical-align: middle;
}

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

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中看起来相当不错。

如何使用JQuery按钮垂直对齐选择？

3 个答案: