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选择菜单上工作

回答

相关问题