1

在这个 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
}
4

2 回答 2

0

问题出在“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/

于 2014-02-08T04:37:54.723 回答
0

这是解决方案的JSFiddle 链接。它需要在 div 容器中包装所有按钮和计数气泡。

<div class="ui-btn-left" data-role="controlgroup" data-type="horizontal"></div>
于 2013-09-15T23:50:54.583 回答