selectmenu не выровнены кнопок интерфейса Jquery в одной и той же линии

Question

В с 2017-детской темы для WordPress отобразить 3 кнопки и 1 selectmenu в одной строке, используя следующий HTML-код:

<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, но подозреваю, что мне нужно добавить его сейчас?

Answer 1

Я установил эту проблему путем добавления настраиваемого кода CSS в wp-content/themes/twentyseventeen-child/style.css файла:

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

Я не знаю, почему он присутствует на кнопках, но не в selectmenu ...

Answer 2

Я думаю, что кнопка элемента или его класс имеют дополнительный запас сверху. Вам нужно добавить их к элементу выбора или его классу.