选择菜单未与同一行中的 jQuery UI 按钮对齐答案

【问题标题】：selectmenu not aligned to jQuery UI buttons in the same line选择菜单未与同一行中的 jQuery UI 按钮对齐
【发布时间】：2017-01-11 11:56:05
【问题描述】：

在 WordPress 的 2017-child 主题中，我使用以下 HTML 代码在一行中显示 3 个按钮和 1 个选择菜单：

<p align="center">
        &nbsp; <button id="prevBtn" disabled>&lt;</button>

        &nbsp; <select id="gamesMenu" disabled></select>

        &nbsp; <button id="nextBtn" disabled>&gt;</button>

        &nbsp; <button id="newBtn" disabled>New game</button>
</p>

和 jQuery UI 1.11.14：

var gamesMenu = $('#gamesMenu').selectmenu({ 
        disabled: true,
        select: function(e, ui) {
                updateGameBoard();
        }
});

var prevBtn = $('#prevBtn').button().click(function(e) {
        e.preventDefault();

        var menu = gamesMenu[0];
        var index = Math.max(menu.selectedIndex - 1, 0);
        menu.selectedIndex = index;
        gamesMenu.selectmenu('refresh');

        updateGameBoard();
});

var nextBtn = $('#nextBtn').button().click(function(e) {
        e.preventDefault();

        var menu = gamesMenu[0];
        var maxIndex = $('#gamesMenu option').length - 1;
        var index = Math.min(menu.selectedIndex + 1, maxIndex);
        menu.selectedIndex = index;
        gamesMenu.selectmenu('refresh');

        updateGameBoard();
});


var newBtn = $('#newBtn').button().click(function(e) {
        e.preventDefault();
        newDlg.dialog('open');
});

由于某种原因，选择菜单没有垂直对齐（是否称为“基线”？）与按钮对齐 - 正如您在下面的屏幕截图中所见（请原谅非拉丁文本）：

有人知道如何解决错误的对齐方式吗？

我还没有使用任何自定义 CSS，但怀疑我现在需要添加一个？

【问题讨论】：

标签： jquery wordpress jquery-ui jquery-ui-selectmenu

【解决方案1】：

我认为元素按钮或他的类在顶部有一些额外的边距。您需要添加相同的选择元素或他的类。

【讨论】：

感谢您的想法 (+1)，但事实并非如此

【解决方案2】：

我已通过将自定义 CSS 代码添加到 wp-content/themes/twentyseventeen-child/style.css 文件来解决此问题：

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

我不确定为什么它会出现在按钮上，而不是出现在选择菜单中...

【讨论】：