jqueryui buttonset()之间的按钮之间的间隙

我遇到一个有趣的现象,我的buttonset()在所有按钮之间都有间隙.显然,我希望他们像在 jquery演示中一样对接.

我的代码是相当的股票

HTML

<div style="float:right;" id="filter-button-bar">
    <input type="radio" id="it_button" name="radio" class="filter-button" /><label for="it_button">information</label>
     <input type="radio" id="rev_button" name="radio" class="filter-button" /><label for="rev_button">Revenue</label>
    <input type="radio" id="ent_button" name="radio" class="filter-button" /><label for="ent_button">Entertainment</label>
    <input type="radio" id="sec_button" name="radio" class="filter-button" /><label for="sec_button">Security</label>
    <input type="radio" id="asst_button" name="radio" class="filter-button" /><label for="asst_button">Assistants</label>
    <input type="radio" id="all_button" name="radio"  class="filter-button" checked="checked"/><label for="all_button">All</label>
</div>

JS

$(function() {
    $( "#filter-button-bar" ).buttonset();
    $( ".filter-button" ).button({
        icons: {
            primary: "ui-icon-search"
        }
    });
});

令人厌烦的是,当放入jsfiddle时,看起来都很棒. jsfiddle

解决方法

删除这些按钮之间的空格.这将解决您的问题：

<input type="radio" id="it_button" name="radio" class="filter-button" /><label for="it_button">information</label><input type="radio" id="rev_button" name="radio" class="filter-button" /><label for="rev_button">Revenue</label><input type="radio" id="ent_button" name="radio" class="filter-button" /><label for="ent_button">Entertainment</label><input type="radio" id="sec_b Et cetera

HTML源代码中的空格通常在HTML中被忽略,除了少数情况之外：

> CSS：white-space：pre,pre-wrap,..(和< pre>标签)
>内联元素之间.

您的代码在此更新后看起来不太可读.如果您不想将整个代码放在一行,您可以安全地在HTML标签中添加换行符.