在此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
}
下面是指向该解决方案的 JSFiddle 链接。它需要包装所有按钮并在div 容器中计数气泡。
<div class="ui-btn-left" data-role="controlgroup" data-type="horizontal"></div>
问题出在"div"标签上。
试试这个(只需在警报图标+气泡之后关闭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/