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

我已经为此挣扎了一段时间（我对jQueryUI真的没有经验）

我正在尝试实现一个jQuery UI，它有一个非常普通的。由于某种原因，我无法理解，selectmenu没有对齐；它在页面上的位置比按钮高很多

下面是它的样子：

我不确定这是否是一个bug，它在我看来确实是非常错误的。我已经挣扎了很长一段时间了，但还没有弄明白

---

标记非常基本，所以我认为在这里包含它并没有多大帮助，但都在这里：。加宽输出以查看同一行中的所有三个元素（选择菜单以及按钮Foo和Bar）。

您可以将

垂直对齐：中间
应用于由跨距组成的下拉列表，以使按钮与下拉列表正确对齐

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


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

为
选择应用类名


在css中，为任何
菜单按钮提供通用规则

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

使用


它可以内联，不需要创建自定义类
 我采用的解决方案是将我希望垂直对齐的内容放在
display:flex
条目中。例如：

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


... 这里还有其他元素

有关此显示类型的更多详细信息，请参阅以下精彩讨论：

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

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

CSS:

不确定是否可以在初始化时向小部件添加自定义类，如果可以，则将规则设置为类名并在此处使用更合适。嗯。。。这在你的垃圾箱中看起来更好，但在我的实际代码中不起作用。什么是速度按钮
？该名称没有出现在您的HTML中，是吗？@unwind它似乎在id中添加了
-button
，但我不确定您是否可以为小部件提供类名。。。似乎没有选择。因此，无论您使用什么id，您都可能希望将
-按钮添加到规则中。谢谢，这确实有效。我很高兴我终于问到了，我自己永远也不会明白这一点。@不客气，放松一下。我提供了另一种可能比处理ID更好的选择。
.fixAnnoyingSelectAlignmentClass
{
   vertical-align: middle;
}