如何将jQuery UI selectmenu与按钮对齐？

Question

我一直在努力解决这个问题(我真的没有使用过jQuery UI).

我正在尝试实现一个jQuery UI,它在一些常规按钮旁边有一个selectmenu.由于某些原因,我无法理解,选择菜单是错误对齐的; 它在页面上比按钮更高.

这是它的样子:

我不确定这是不是一个bug,对我来说肯定是非常错误的.我现在已经挣扎了很长一段时间,但还是没能弄清楚.

标记非常基本,所以我认为将它包含在这里并不是很有帮助.但是这一切都在这里:http://jsbin.com/afixij/10/edit？html,css,js,output.加宽输出以查看同一行上的所有三个元素(选择菜单和按钮Foo和Bar).

Answer 1

您可以只应用于vertical-align:middle由跨度组成的下拉列表,以使按钮与下拉列表正确对齐.

#speed-button{
  vertical-align : middle;
}

箱子

似乎没有为选择菜单小部件提供自定义类名的选项(如果是这种情况则很糟糕),因为将规则应用于类会更好.你也可以这样做: -

为...申请一个类名 select

并且在css中为任何.menu-buttons 提供通用规则

.menu-button + .ui-selectmenu-button{
   vertical-align : middle;
}

斌