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

Question

我一直在努力解决这个问题（我真的没有使用过jQuery UI）。

我试图在一些常规selectmenu旁边实现一个buttons的jQuery UI。出于某种原因，我无法理解，选择菜单是错误对齐的;它在页面上的位置高于按钮。

这就是它的样子：

我不确定这是不是一个错误，对我来说肯定是非常错误的。我现在已经挣扎了很长一段时间但是还没有能够解决这个问题。

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

Answer 1

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

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

<强> Bin

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

为select

申请一个班级名称

并在css中为任何.menu-button

提供通用规则

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

<强> Bin2

Answer 2

使用

制作实际按钮（而不是菜单）实际上可能更容易

<button style="vertical-align: top"></button>

可以内联，并且不需要创建自定义类。

Answer 3

我应用的解决方案是将我希望垂直对齐的内容放在display: flex条目中。例如：

<div style="display: flex; align-items: center;">
    ... other elements here
</div>

有关此显示类型的更多详细信息，请参阅此优秀讨论：

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 4

要扩展标记的答案，有一种方法可以获取selectmenu创建的jquery对象。确保首先初始化选择菜单，否则它将无法正常工作。

$("#speed").selectmenu();
$("#speed").selectmenu("widget").addClass("fixAnnoyingSelectAlignmentClass");

CSS：

.fixAnnoyingSelectAlignmentClass
{
   vertical-align: middle;
}