CSS部分(ii 调整位置)
.labelBadge {
position: relative;
}
.ii {
background: #f00;
border-radius: 50%;
width: 20px;
height: 20px;
top: -10px;
right: -15px;
position: absolute;
text-align: center;
color: #FFF;
z-index: 99999;
font-size: 14px;
}
HTML部分(参考)
<div class="col-md-12 col-lg-8 mrbt">
<div style="box-shadow: 0px 0px 5px #ccc;margin-top:20px;padding-bottom:20px;">
<table style="width: 100%; margin: 0 auto;" class="xz-kjfs">
<tr>
<td><a onclick="openToDo()">
<div style="width: 90px; margin: 0 auto;">
<span class="nav-label labelBadge">
<span class="ii" th:if="${todoNum > 0}">[[${todoNum}]]</span>
<img src="../img/daiban.svg" style="width:75%;margin-top: 20px;"/>
</span>
</div>
<p>我的待办</p>
</a></td>
<td><a onclick="openReceiveTelegram()">
<div style="width: 90px; margin: 0 auto;">
<span class="nav-label labelBadge">
<span class="ii" th:if="${receiveNum > 0}">[[${receiveNum}]]</span>
<img src="../img/shouwen.svg" style="width:75%;margin-top: 20px;"/>
</span>
</div>
<p>我的收文</p>
</a></td>
<td><a onclick="tzTz()">
<div style="width: 90px; margin: 0 auto;">
<span class="nav-label labelBadge">
<span class="ii" th:if="${noticeNum > 0}">[[${noticeNum}]]</span>
<img src="../img/gonggao.svg" style="width:75%;margin-top: 20px;"/>
</span>
</div>
<p>通知公告</p>
</a></td>
<td><a onclick="bmtxTz(1)">
<div style="width: 90px; margin: 0 auto;">
<span class="nav-label labelBadge">
<span class="ii" th:if="${bmtxNum > 0}">[[${bmtxNum}]]</span>
<img src="../img/tixing.svg" style="width:75%;margin-top: 20px;"/>
</span>
</div>
<p>保密提醒</p>
</a></td>
<td><a onclick="bmtxTz(2)">
<div style="width: 90px; margin: 0 auto;">
<span class="nav-label labelBadge">
<span class="ii" th:if="${ylsgNum > 0}">[[${ylsgNum}]]</span>
<img src="../img/shigui.svg" style="width:75%;margin-top: 20px;"/>
</span>
</div>
<p>以例释规</p>
</a></td>
<td><a onclick="bmtxTz(3)">
<div style="width: 90px; margin: 0 auto;">
<span class="nav-label labelBadge">
<span class="ii" th:if="${xxydNum > 0}">[[${xxydNum}]]</span>
<img src="../img/xuexi.svg" style="width:75%;margin-top: 20px;"/>
</span>
</div>
<p>学习园地</p>
</a></td>
<td><a onclick="bmtxTz(4)">
<div style="width: 90px; margin: 0 auto;">
<span class="nav-label labelBadge">
<span class="ii" th:if="${jypxNum > 0}">[[${jypxNum}]]</span>
<img src="../img/jiaoyu.svg" style="width:75%;margin-top: 20px;"/>
</span>
</div>
<p>教育培训</p>
</a></td>
</tr>
</table>
</div>
</div>