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」タグにあります。

これを試してください（アラートアイコン+バブルの後に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 に答える