Wijmo 表单装饰器下拉列表和按钮样式问题

Question

我们已经开始使用 Wijmo （基于 jQuery UI 和 jQuery UI 主题滚轮）在我们的一个应用程序上，但 Wijmo 表单装饰器样式中的下拉列表和按钮有问题。

我查看了 Wijmo 文档，但它们没有帮助。

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

启动脚本如下：

<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 来启用 select 功能。

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

我已经删除了除 Wijmo 或 ThemeRoller 以外的所有其他样式表，但没有任何变化。我们正在使用 Wijmo 附带的“火箭”主题。

每次我尝试操作其中一个的 margin-top 属性时，它都会重新对齐与正上方的 input 搜索字段内联的所有元素。

表单的 HTML 代码是：

<FORM id="serialSearch" name="serial_search" method="POST" action="index.php">
    <label>Serial number: </label><input type="text" name="query" id="query" size="30" autocomplete="off" value="<? echo $serial_query; ?>" />
    <br />
    <select name="searchType">
        <option value="standard">Standard</option>
        <option value="fuzzy">Fuzzy</option>
    </select>
    <button>Search serial numbers</button>
    <input type="hidden" name="serial_submit" id="serial_submit" value="search_serials" />
</FORM>

正确对齐对我们来说非常重要，并感谢任何建议，提前致谢。

Answer 1

您需要将所有表单元素包装在一个 div 中，假设有一个“input”类，并将此样式应用于 div 元素：

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

在这里你可以看到一个jsfiddle，它显示了它的样子。

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