对齐 jqueryui 的按钮和选择菜单

Question

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

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

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
});

当前结果：

显示问题的小提琴：https://jsfiddle.net/9xv7jqn4/2/

这是一个错误还是我缺少的设置？任何帮助表示赞赏

编辑： 感谢您的回答，我仍在我的代码中测试它们......我也有兴趣知道为什么会发生这种情况？为什么选择菜单占用的空间比看起来要多？这是选择菜单小部件的错误吗？

Answer 1

也许用这个 css：

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

你的变化：https://jsfiddle.net/9xv7jqn4/3/

Answer 2

基于线程：“jQuery ui selectmenu vertical position offset (relatively to buttons in this line)”和这里的建议，我最终添加了一些规则来解决我的问题。

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

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

Answer 3

你可以使用

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 4

另一个不错的选择是在此处添加包装器：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>