我遇到了一个有趣的现象,我的 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 标记中添加换行符。
关于jquery - jqueryui Buttonset() 上按钮之间的间隙,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7732447/