0

我有一些选择元素：

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

他们拒绝 inline ，每个都占据一整行，这是在萤火虫上看到的 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;">

我试过 style="display:inline"，不起作用..我已经制作了标签 display:inline，但这只会让它变得更糟..

有什么想法吗？10倍

4

1 回答 1

1

我检查了一下，看起来 jQuery UI 向新创建的元素添加了“显示：块”：

.ui-selectmenu {
    display: block;
}

解决方案是覆盖它，但是 display: inline 没有帮助，我们需要类似 inline-block 的东西，最好是跨浏览器：

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

这里的例子：http: //jsfiddle.net/demee/YJVhG/2/

于 2012-05-06T15:08:58.180 回答