CSS float：rightはJQueryUIのselectmenuでは機能しません

debugcn 投稿 Dev

フィリップ

jQueryUIを使用して検索フォームを作成しています。selectフォームの右側にあるメニューを。に揃えようとするまで、希望する結果を得ることができましたCSS。

これが私がやろうとしていることの単純化されたバージョンです：https：//jsfiddle.net/z829pay7/15/。

そして、以下の対応するコード：

HTMLコード

 <form action="/" method="get" >

        <input type="button" id ="button3" value="Button3" class="button left"/>

        <input type="button" id ="button2" value="Button2" class="button right"/>

        <input type="button" id ="button1" value="Button1" class="button right"/>

        <select name="select" id="select" class="select">
                <option>Option 1</option>
                <option>Option 2</option>
        </select>
    </form>

JavaScriptコード

      $(".select").selectmenu({
          width:200
      });
      $(".button").button();

CSSコード

.right {
    float:right;
    clear:left;
}

.button {
    vertical-align : middle;
}

.select {
    float: right;
    vertical-align:middle;
}

float:rightjQuery UIボタンを使用していますが、期待どおりに機能しています。上selectのメニューCSSを無視しているようです。

また、buttonsとselectメニューを垂直に揃える方法が見つかりません。

私が間違っていることを教えてください！

編集（2015/08/31 13:17）：フィドルリンクを更新しました。

ラドゥ

selectをdivでラップしたので、次のようになります。

<div class="right">
<select name="select" id="select" class="select">
        <option>Option 1</option>
        <option>Option 2</option>
</select>
</div>

フィドラーリンク

お役に立てれば。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]