Question

第一个问题，为什么这种风格

label, input { display:block; }

减少dropdownchecklist下拉列表的宽度（文本显示在复选框下方）？该程序的其他部分需要该样式，因此消除样式并不是那么简单。

第二个问题：如果我在jQuery对话框之外使用dropdownchecklist插件，它可以很好地工作。但是如果将它添加到对话框中，宽度将减小到零，即使我在Firebug中调整宽度，它也不起作用（单击不会产生下拉列表）。 's9'id来自dropdownchecklist演示代码。

 $(document).ready(function() {           

        $("#s9").dropdownchecklist( { textFormatFunction: function(options) {
            var selectedOptions = options.filter(":selected");
            var countOfSelected = selectedOptions.size();
            switch(countOfSelected) {
                case 0: return "Nobody";
                case 1: return selectedOptions.text();
                case options.size(): return "Everybody";
                default: return countOfSelected + " People";
            }
        } });

以下代码来自对话框演示。

<div class="demo">
        <div id="dialog-form" title="Create new user">
            <p class="validateTips">All form fields are required.</p>            
            <form>
            <fieldset>
                <label for="userid">User ID</label>
                <input type="text" name="userid" id="userid" class="text ui-widget-content ui-corner-all" />                   
                <label for="password">Password</label>
                <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
                <label for="email">email</label>
                <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />                                                      
                <label for="locked">Locked</label>
                <input type="checkbox" name="locked" id="locked" value="" >                    
                <select  id="s9" class="s9" multiple="multiple" >
                 <option>Alice</option>
                 <option>Bob</option>
                 <option>Christian</option>
                 <option>Daniel</option>
                </select>                 
          </fieldset>      
         </form>
</div>

我需要更改什么才能使dropdownchecklist在对话框中工作？普通的下拉框工作正常，但我希望复选框使用户更容易理解。

这个问题听起来像我的问题，但它似乎对我不起作用： jQuery Plugin does not work in a Modal

谢谢。

Answer 1

关于第一个问题：块级元素（例如DIV，P等，或者与display: block块级别的元素）通常从新行开始。

您可以使用display: inline-block，但它在较旧的IE中支持较差（IE6 / 7中的部分支持，旧版本不支持）。更好的方法可能是将label + input对放在<div>中并使用：

label, input { 
    display:block; 
    float: left;
}

关于你的第二个问题，我们可以看一个实例或jquery代码吗？

jQuery对话框中的插件问题

1 个答案: