jquery - 同じ行のjQuery UIボタンに整列されていないselectmenu

Question

WordPress の 2017 年子テーマでは、次の HTML コードを使用して 3 つのボタンと 1 つの選択メニューを 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');
});

下のスクリーンショットでわかるように、何らかの理由で selectmenu が垂直方向に配置されていません (「ベースライン」と呼ばれていますか?)。

間違った配置を回避する方法を知っている人はいますか?

カスタム CSS はまだ使用していませんが、今すぐ追加する必要があると思われますか?