CSS浮動：權利不能在JQuery UI選擇菜單上工作

我正在使用jQuery UI來製作搜索表單。我能夠得到我想要的結果，直到我嘗試將我的表單右側的select菜單與CSS對齊。CSS浮動：權利不能在JQuery UI選擇菜單上工作

下面是我想要做的簡化版本：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; 
}

我在jQuery UI按鈕上使用float:right，它按預期工作。在select菜單CSS似乎被忽略。

我也找不到垂直對齊buttons和select菜單的方法。

請讓我知道我做錯了什麼！

編輯（2015/08/31 13:17）：我更新了小提琴鏈接。

來源

2015-08-31 Philippe

選擇菜單，因爲它隱藏與顯示不採取CSS：無 – Rahul

@philippe這算什麼，你期待[小提琴] （https://jsfiddle.net/Kri4shna/fw40o1r8/2/） – Webruster

林'對不起，它看起來像我忘了保存我的JSfiddle！我有理由編輯它：https://jsfiddle.net/z829pay7/15/。 @Webruster，我期望的是讓我的菜單在屏幕的右側對齊，但在Button1的左側。理想情況下，它應該具有相同的尺寸，並與按鈕垂直對齊。 – Philippe

我的包裹中選擇一個div，所以它看起來是這樣的：

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

fiddler link

希望這有助於。

來源

2015-08-31 15:16:18 Radu

謝謝！它通過添加一個div來工作。這是小提琴：https：//jsfiddle.net/bilgamesh/pLbja708/1/。但是，高度仍然被選擇菜單忽略。所以我只是調整了按鈕的高度以匹配選擇菜單的高度。 – Philippe

我已添加一個div並對此我添加了一個名字爲test的班級。這一類，我可以能夠分配的CSS爲select

這裏工作fiddle

來源

2015-08-31 16:22:59 Webruster

@philippe根據您的意見更新了小提琴 – Webruster

它不工作，因爲引導隱藏選擇並把另一個元素上的位置選擇到實現這種視覺效果，所以應用於選擇的任何CSS規則都不會影響視覺效果。我建議您在發生這種事情時使用瀏覽器開發工具來檢查代碼。

達到你想要什麼，我認爲最好的辦法是包裝選擇含有「右」級，這樣，當引導切換DIV的選擇有DIV，包裝div將確保裏面的內容收到你想要的CSS規則。它看起來是這樣的：

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

來源

2015-08-31 16:35:50

使用這種樣式：

<style> 
     #sex-button { 
     float: right; 
     vertical-align:middle; 
    } 
    </style> 

<select name="sex" id="sex"> 
<option value="male">Male</option> 
<option value="female">Female</option> 
</select>

來源

2017-01-05 16:50:44 rad

CSS浮動：權利不能在JQuery UI選擇菜單上工作

回答

相關問題