jquery 移动控制组之间的空格

Question

我正在尝试使用 jQuery 移动可折叠小部件。但是，直接使用 their site 中的代码（特别是图例），我注意到控制组之间有空格。

<form>
    <fieldset data-role="collapsible">
        <legend>Legend</legend>
        <div data-role="controlgroup">
            <input type="checkbox" name="checkbox-1-a" id="checkbox-1-a" />
            <label for="checkbox-1-a">One</label>
            <input type="checkbox" name="checkbox-2-a" id="checkbox-2-a" />
            <label for="checkbox-2-a">Two</label>
            <input type="checkbox" name="checkbox-3-a" id="checkbox-3-a" />
            <label for="checkbox-3-a">Three</label>
        </div>
    </fieldset>
</form>

有办法去除这些吗？我尝试通过默认 css 查看是否有可以更改的属性，但我找不到任何东西。这是我的 jsfiddle，它显示了空格和我的代码。任何帮助将不胜感激！

Answer 1

这些间隙是 html 标记中的空格和换行符造成的。这对我有用：

<form>
    <fieldset data-role="collapsible">
        <legend>Legend</legend>
        <div data-role="controlgroup">
            <input type="checkbox" name="checkbox-1-a" id="checkbox-1-a"><label for="checkbox-1-a">One</label><input type="checkbox" name="checkbox-2-a" id="checkbox-2-a"><label for="checkbox-2-a">Two</label><input type="checkbox" name="checkbox-3-a" id="checkbox-3-a"><label for="checkbox-3-a">Three</label>
        </div>
    </fieldset>
</form>

Updated jsFiddle

或者，使 html 标记不那么难看：

<form>
    <fieldset data-role="collapsible">
        <legend>Legend</legend>
        <div data-role="controlgroup">
            <input 
                type="checkbox" name="checkbox-1-a" id="checkbox-1-a"><label
                for="checkbox-1-a">One</label><input
                type="checkbox" name="checkbox-2-a" id="checkbox-2-a"><label
                for="checkbox-2-a">Two</label><input
                type="checkbox" name="checkbox-3-a" id="checkbox-3-a"><label
                for="checkbox-3-a">Three</label>
        </div>
    </fieldset>
</form>

jquery 移动控制组之间的空格

Spaces between jquery mobile controlgroup

javascript

css

jquery

jquery-mobile