css - Jquery Mobile - 显示带有气泡计数的图标

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>