jquery - selectmenu not aligned to jQuery UI buttons in the same line

Question

In a 2017-child theme for WordPress I display 3 buttons and 1 selectmenu in one line using the following HTML code:

<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>

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

For some reason the selectmenu is not vertically (is it called "base line"?) aligned to the buttons - as you can see in the screenshot below (please pardon the non-latin text):

Does anybody know how to workaround the wrong alignment?

I do not use any custom CSS yet, but suspect that I need to add one now?

Answer 1

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

Answer 2

我通过在wp-content/themes/twentyseventeen-child/style.css文件中添加自定义 CSS 代码解决了这个问题：

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

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