Question

我使用jquery mobile在弹出窗口中创建了一个可折叠的复选框列表。

问题是列表项和checbox与左侧有一个标识（空格）。如何摆脱这个空白区域，并保持100％与可折叠容器的复选框？谢谢

Answer 1

在弹出窗口中给出标记，如下所示：

<div data-role="collapsible" data-collapsed="false">
    <h4>Heading</h4>
    <ul data-role="listview" id="myList">
        <li>
            <label>
                <input type="checkbox" name="checkbox-0" />Check me
            </label>
        </li>
        <li>
            <label>
                <input type="checkbox" name="checkbox-1" />Check me
            </label>
        </li>
       <li>
           <label>
               <input type="checkbox" name="checkbox-2" />Check me
           </label>
       </li>
    </ul>
</div>

你可以添加一些CSS规则来摆脱填充和圆角：

#myList li {
    padding: 0;
    border: 0 !important;
}
#myList li .ui-checkbox {
    margin: 0;
 }
#myList li .ui-checkbox label {
    border-radius: 0 !important;
}

这是 DEMO

jquery移动可折叠复选框列表

1 个答案: