jquery 移动控件组之间的空格

Question

我正在尝试使用jQuery Mobile可折叠小部件。但是，使用直接来自他们网站（特别是图例）的代码，我注意到对照组之间有空格。

<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>

更新的 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>