jQuery的selectMenu創建換行符（不能讓它顯示inline）

Question

我有幾個選擇元素：

<div id="divReports"> 
<select id="ddlReportTypes" style="width:200px;"></select> 
<select id="ddlReportFarms" style="width:200px;"></select> 
<select id="ddlReportClusters" style="width:200px;"></select> 
</div> 

他們展示自己就好了，在同一條直線

，當我把他們成這樣selectMenus：

$("#divReports select").selectmenu({ 
style: 'dropdown', 
transferClasses: true 
}); 

他們拒絕成爲內聯，並且每一個佔據整個行 這是因爲看到的螢火的HTML：

<select id="ddlReportTypes" style="width: 200px; display: none;"> 
<a id="ddlReportTypes-button" class="ui-selectmenu ui-widget ui-state-default  ui-selectmenu-dropdown ui-corner-all" aria-owns="ddlReportTypes-menu" aria-haspopup="true" href="#" role="button" style="width: 200px;"> 
<span class="ui-selectmenu-status">Traffic variance report </span> 
<span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span> 
</a> 

<select id="ddlReportFarms" style="width: 200px; display: none;"> 
<a id="ddlReportFarms-button" class="ui-selectmenu ui-widget ui-state-default ui-corner-all ui-selectmenu-dropdown" aria-owns="ddlReportFarms-menu" aria-haspopup="true" href="#" role="button" style="width: 200px; display: block;"> 

<select id="ddlReportClusters" style="width: 200px; display: none;"> 
<a id="ddlReportClusters-button" class="ui-selectmenu ui-widget ui-state-default ui-corner-all ui-selectmenu-dropdown" aria-owns="ddlReportClusters-menu" aria-haspopup="true" href="#" role="button" style="width: 200px; display: block;"> 

我試過的風格=「顯示：內聯」，沒有工作.. 我做了標記顯示：內聯，但只有讓事情變得更糟..

任何想法嗎？ 10X

Answer 1

我檢查，它看起來像jQuery UI添加「顯示：塊」到新創建的元素：

.ui-selectmenu { 
    display: block; 
} 

解決辦法是將其覆蓋，但顯示：內聯，不會幫助，我們需要這樣的東西，內聯塊，最好是跨瀏覽器：

.ui-selectmenu { 
    display:-moz-inline-stack; 
    display:inline-block; 
    zoom:1; 
    *display:inline; /* To make IE7 happy */ 
} ​​​​​​​ 

這裏舉例：http://jsfiddle.net/demee/YJVhG/2/