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

Question

在 2017 年的 WordPress 子主题中，我使用以下 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');
});

由于某些原因，选择菜单不是垂直对齐的（它叫 "base line" 吗？）与按钮对齐 - 正如您在下面的屏幕截图中看到的（请原谅非拉丁文本）：

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

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

Answer 1

我认为元素按钮或他的 class 在顶部有一些额外的边距。您需要将相同的内容添加到 select 元素或他的 class.

Answer 2

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

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

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

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

selectmenu not aligned to jQuery UI buttons in the same line

wordpress

jquery

jquery-ui

jquery-ui-selectmenu