Jquery ui 对齐jqueryui'；s按钮，然后选择Menu

我在按钮旁边创建了一个选择菜单。我想知道如何使选择菜单与按钮的Y轴相同？（理想情况下，我也希望它具有相同的高度，但我猜这是另一回事……）

如图所示，除了选择宽度外，我没有其他配置：

HTML:

当前结果：

显示问题的小提琴：

这是一个bug还是我缺少的设置？谢谢你的帮助

编辑： 谢谢你的回答，我还在我的代码中测试它们。。。我还想知道为什么会发生这种情况？为什么SelecteMu占用的空间比它看起来的要大？这是selectmenu小部件的一个bug吗？

可能与此css有关：

display: inline-flex;
vertical-align: middle;

您可以随意更改：

您可以使用

vertical-align: top;

对于您的按钮，如下所示：

$（'button'）.button（）；
$（'select'）。选择菜单（{width:120}）
div，
按钮
挑选{
边框：细点红色；
}
跨度{
边框：细点蓝色；
}
.一{
垂直对齐：顶部；
}

按钮
烤干酪辣味玉米片
塔玛
另一个好的选择是添加包装器，如下所示：


$（'button'）.button（）；
$（'select'）。选择菜单（{width:120}）
div，
按钮
挑选{
边框：细点红色；
}
跨度{
边框：细点蓝色；
}
w{
显示：内联块；
垂直对齐：中间对齐；
}

按钮
烤干酪辣味玉米片
塔玛
基于线程：“”和这里的建议，我最后添加了两条规则来解决我的问题

我不知道为什么，但ui selectmenu按钮不像其他按钮那样垂直对齐。还减少了内部文本的填充，使其看起来几乎（不完全）与其他按钮的高度相同

.ui-selectmenu-button {
    vertical-align: middle;
}                                                                                                                                                                  
.ui-selectmenu-button .ui-selectmenu-text {
    padding-top: 0.3em; padding-bottom: 0.3em;
}

IE不支持内联flex，直到IE10，我也发现了这一点
vertical-align: top;

.ui-selectmenu-button {
    vertical-align: middle;
}                                                                                                                                                                  
.ui-selectmenu-button .ui-selectmenu-text {
    padding-top: 0.3em; padding-bottom: 0.3em;
}