jQuery 移动复选框控制组间距

Question

我在设置 jQuery 移动复选框控制组时遇到问题。在下面，您可以看到复选框的预期方式以及它目前在我的应用程序中的方式。显然，我的 Controlgroup 的内部间距比预期的要大，而且我没有更改 css.

的任何填充或边距属性

页面的HTML代码为：

<form>
    <fieldset class="ui-field-contain" data-role="controlgroup" data-iconpos="right">
        <legend>Swatch B:</legend>
        <input type="checkbox" name="checkbox-t-2a" id="checkbox-t-2a" data-theme="a">
        <label for="checkbox-t-2a">One</label>
        <input type="checkbox" name="checkbox-t-2b" id="checkbox-t-2b" data-theme="a">
        <label for="checkbox-t-2b">Two</label>
        <input type="checkbox" name="checkbox-t-2c" id="checkbox-t-2c" data-theme="a">
        <label for="checkbox-t-2c">Three</label>
    </fieldset>
</form>

Answer 1

单击 Fiddle 中的 "Tidy" 按钮，它会对其进行调整。

要正确对齐按钮 "Confirmar" 只需设置一个空标签，然后删除 ui-btn-inline class（此处不需要额外的内联样式）：

<div class="ui-field-contain">
  <label for="btnConfirmar"></label>
  <a id="btnConfirmar" href="#popupLogin" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow  ui-icon-check ui-btn-icon-left ui-btn-a" data-transition="pop">Confirmar</a>
</div>

Answer 2

复选框之间的space是从JQueryMobile网站上复制代码造成的。如果您使用 Chrome 开发工具查看您的元素，您会看到一堆像这样的 space。只需删除代码中标记之间的 spaces。

来自您 fiddle 的开发工具屏幕截图：

jQuery 移动复选框控制组间距

jQuery Mobile checkboxes controlgroup spacing

javascript

css

jquery

jquery-mobile