Question

在this JSFiddle中，目标是在每个图标旁边显示一个气泡计数。

当尝试显示带有气泡的2个连续图标时，图标向左浮动并分组在一起。

每个图标后立即显示气泡计数需要什么CSS？

HTML

<div style="display: inline-block; white-space: nowrap">
 <a href="#" class="ui-nav-icon" data-role="button" data-icon="alert" data-iconpos="notext">Alerts</a>
 <span class="nav-icon ui-li-count ui-btn-up-c ui-btn-corner-all" style="font-size:10px;position:static">42</span>

 <a href="#" class="ui-nav-icon" data-role="button" data-icon="info" data-iconpos="notext">Information</a>
 <span class="nav-icon ui-li-count ui-btn-up-c ui-btn-corner-all">173</span>
</div>

CSS

a.ui-nav-icon {
    float: left
}
span.nav-icon {
    font-size:11px
}

Answer 1

这是解决方案的JSFiddle link。它需要包装所有按钮并计算div容器中的气泡。

<div class="ui-btn-left" data-role="controlgroup" data-type="horizontal"></div>

Answer 2

问题在于'div'标签。

试试这个（只需在alerticon + bubble之后关闭div标签，然后再打开另一个div）

代码如下：：

<div style="display: inline-block; white-space: nowrap">
<a href="#" class="ui-nav-icon" data-role="button" data-icon="alert" data-iconpos="notext">Alerts</a>
<span class="nav-icon ui-li-count ui-btn-up-c ui-btn-corner-all" style="font-size:10px;position:static">42</span>
 </div>

 <div style="display: inline-block; white-space: nowrap">
<a href="#" class="ui-nav-icon" data-role="button" data-icon="info" data-iconpos="notext">Information</a>
<span class="nav-icon ui-li-count ui-btn-up-c ui-btn-corner-all">173</span>
</div>

我也更新了你的jsfiddle： http://jsfiddle.net/LbDBQ/8/

Jquery Mobile - 带泡沫计数的显示图标

2 个答案: