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 であることを拒否し、それぞれが行全体を占有します。これは、firebug で見られる 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 が新しく作成された要素に「display: block」を追加したようです。

.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 に答える