Wijmo Form Decorator下拉列表＆amp;按钮样式问题

Question

我们已经开始在我们的某个应用程序上使用Wijmo（基于jQuery UI＆amp; jQuery UI Theme Roller），但是Wijmo Form Decorator样式中的下拉列表和按钮存在问题。

我看过Wijmo Docs，但他们没有帮助。

我们已经启动了脚本并且应用了样式但是在所有表单上我都无法使下拉项与其他元素正确对齐。

启动脚本如下：

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $(":input[type='text'],:input[type='password'],textarea").wijtextbox();
        $("select").wijdropdown();
        $(":input[type='radio']").wijradio();
        $(":input[type='radio']").wijcheckbox();
        $("button").button();
    });
</script>

正如您将注意到.button()和.wijdropdown()函数正在应用于标记的每个实例而不是类或ID - 我们对所有3种方法都有同样的问题并且已经这样做了这是整个应用程序所需要的。

您可以在此处查看问题的屏幕截图：

我一直在使用Firebug来尝试解决问题所在，我怀疑其中的一部分是Wijmo将select元素转换为div并应用JS来启用{{1功能。

我一直在使用Firebug和Chrome开发人员工具来调试它，我注意到在这两个元素的上方或下方都没有应用边距。

我删除了所有其他非Wijmo或ThemeRoller但没有更改的样式表。我们正在使用Wijmo附带的“火箭”主题。

每当我尝试操纵select属性时，它都会重新排列与上方margin-top搜索字段内联的所有元素。

表单的HTML代码是：

input

对于我们来说，正确地进行这种对齐非常重要，并且要提前感谢任何建议。

Answer 1

你需要将所有表单元素包装在div中，让我们说一个类“input”并将这个样式应用于div元素：

div.input {
    display: inline-block;
    vertical-align: top;
}

here you can see a jsfiddle显示它的外观。

作为一个建议，下次创建一个jsfiddle而不是截图，这样人们和你都可以更容易地测试你的代码。