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/

这是我错过的错误还是设置？任何帮助表示赞赏

修改谢谢你的答案，我仍然在我的代码中测试它们......我也有兴趣知道为什么会这样？选择为什么占用的空间比看起来多？这是selectmenu小部件的错误吗？

Answer 1

也许用这个css：

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

你改变了方法：https://jsfiddle.net/9xv7jqn4/3/

Answer 2

基于主题：＆＃34; jQuery ui selectmenu vertical position offset (relatively to buttons in this line)＆＃34;我也在这里提出建议，最后添加了一些修复我案例的规则。

我不知道为什么但是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/

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

另一个好的选择是添加像这里的包装器：https://jsfiddle.net/9xv7jqn4/6/

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

对齐jqueryui的按钮和选择菜单

4 个答案: