如何将 jQuery UI 选择菜单与按钮对齐？答案

【问题标题】：How to align jQuery UI selectmenu with buttons?如何将 jQuery UI 选择菜单与按钮对齐？
【发布时间】：2014-08-17 15:18:42
【问题描述】：

我已经为此苦苦挣扎了一段时间（我真的没有使用 jQuery UI 的经验）。

我正在尝试实现一个 jQuery UI，它在一些常规的 buttons 旁边有一个 selectmenu。出于某种我无法理解的原因，选择菜单未对齐；它在页面上比按钮更高。

它是这样的：

我不确定这是否是错误，在我看来确实很错误。我已经苦苦挣扎了好一阵子了，但一直没搞清楚。

标记确实非常基础，所以我认为将其包含在此处并没有多大帮助。但都在这里：http://jsbin.com/afixij/10/edit?html,css,js,output。扩大输出以在同一行上查看所有三个元素（选择菜单以及按钮 Foo 和 Bar）。

【问题讨论】：

【解决方案1】：

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

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

Bin

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

为select 应用类名

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

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

【讨论】：

不确定是否可以在初始化时向小部件添加自定义类，如果可以，请将规则设置为类名并在此处使用它会更合适。
嗯 ...在您的 bin 中看起来更好，但在我的实际代码中不起作用。 speed-button 是什么？该名称不会出现在您的 HTML 中，是吗？
@unwind 似乎它将-button 添加到id，但我不确定您是否可以为小部件提供类名...似乎没有选项。因此，无论您使用什么 id，您都可能希望将 -button 添加到规则中。
谢谢，这确实有效。我很高兴我终于问到了，我自己永远也想不通。
@unwind 欢迎您。我提供了另一个选项，它可能比处理 id 更好。

【解决方案2】：

通过使用来制作实际的按钮（不是菜单）实际上可能更容易

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

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

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

CSS：

.fixAnnoyingSelectAlignmentClass
{
   vertical-align: middle;
}

【讨论】：