Question

我正在使用jQuery UI制作搜索表单。我能够得到我想要的结果，直到我尝试将表单右侧的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;
}

我在jQuery UI按钮上使用float:right，它按预期工作。在select菜单上，CSS似乎被忽略了。

我也找不到垂直对齐buttons和select菜单的方法。

请让我知道我做错了什么！

编辑（2015/08/31 13:17）：我已经更新了小提琴链接。

Answer 1

我已经将div包装在div中，所以它看起来像这样：

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

fiddler link

希望这有帮助。

Answer 2

我添加了div，并且我已经添加了一个名为test的类。通过这个课程，我可以为select

指定css

这是工作fiddle

Answer 3

它不起作用，因为Bootstrap隐藏选择并将另一个元素放在 select 的位置以实现该视觉效果，因此任何CSS规则都适用于选择不会影响视觉效果。我建议您在发生此类事件时使用浏览器开发人员工具检查代码。

为了达到你想要的效果，我认为最好的方法是用一个 div 包含select，包含＆＃34; right＆＃34;这样，当Bootstrap用 div 切换 select 时，包装器 div 将确保内部的内容接收你想要的CSS规则。它看起来像这样：

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

Answer 4

使用此风格：

  <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>

CSS float：右边没有在JQuery UI selectmenu上工作

4 个答案: