对齐 jqueryui 的按钮和选择菜单

Question

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

如所示代码，除了 select 宽度外，我没有其他配置：

HTML:

<div>
    <button>button</button>
    <select>
        <option>nacho</option>
        <option>tama</option>
    </select>
</div>

jqueryui JS

$('button').button();
$('select').selectmenu({
    width: 120 // Needed to show see options
});

当前结果：

Fiddle 说明问题：https://jsfiddle.net/9xv7jqn4/2/

这是错误还是我遗漏了设置？感谢任何帮助

编辑： 谢谢你的回答，我还在我的代码中测试它们......我也很想知道为什么会这样？为什么 selectemenu 占用的 space 比看起来多？这是 select 菜单小部件的错误吗？

Answer 1

也许用这个 css:

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

您的 fiddle 有以下更改：https://jsfiddle.net/9xv7jqn4/3/

Answer 2

您可以使用

vertical-align: top;

您的按钮如下所示：https://jsfiddle.net/9xv7jqn4/4/

$('button').button();
$('select').selectmenu({width: 120});

div,
button,
select{
    border: thin dotted red;
    
}
span {
    border: thin dotted blue;
}
.one{
    vertical-align: top;
}

<div>
    <button class='one'>button</button>
    <select>
        <option>nacho</option>
        <option>tama</option>
    </select>
</div>

Answer 3

另一个不错的选择是添加包装器，如下所示：https://jsfiddle.net/9xv7jqn4/6/

$('button').button();
$('select').selectmenu({width: 120});

div,
button,
select{
    border: thin dotted red;
    
}
span {
    border: thin dotted blue;
}
.w{
    display:inline-block;
    vertical-align: middle;
}

<div>
    <div class='w'>
    <button>button</button>
    </div>
    <div class='w'>
    <select>
        <option>nacho</option>
        <option>tama</option>
    </select>
    </div>
</div>

Answer 4

基于线程：“”和这里的建议，我最终添加了一些规则来解决我的问题。

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

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

对齐 jqueryui 的按钮和选择菜单

align jqueryui's button and selectmenu

jquery-ui

drop-down-menu