jquery mobile controlgroup之间的空格

Question

我正在尝试使用 jQuery Mobile 可折叠小部件。但是，直接使用来自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>