selectmenu未与同一行中的jQuery UI按钮对齐

Question

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

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

由于某种原因，selectmenu不是垂直的（它被称为＆＃34;基线＆＃34;？）与按钮对齐 - 正如您在下面的屏幕截图中看到的那样（请原谅非拉丁文本）：< / p>

有人知道如何解决错误的路线？

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

Answer 1

我认为元素按钮或他的班级在顶部有一些额外的余量。您需要将其添加到select元素或他的类中。

Answer 2

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

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

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