时间戳

首页 > 解决方案 > 如何使元素旁边的小通知计数

html - 如何使元素旁边的小通知计数

问题描述

我有以下 html 标签

<li style="background-color: rgb(255, 255, 255);">
     <b><span class="need-confirm-number" style="/*height: 15px;*/ display: inline;">0</span></b>
     <a href="#" class="text-dark">My Submitted Requests</a>
</li>
我想让通知计数（b 标记）出现在锚标记的左侧？我该怎么做？

标签： htmlcss

解决方案

<li style="background-color: rgb(255, 255, 255);position:relative;">
     <span class="need-confirm-number" style="position:absolute; top: -5px; left: 5px; height: 15px;padding: 2px;display: inline-block; background:#ff0000; color:#fff; border-radius: 5px;"><b>0</b></span>
     <a href="#" class="text-dark">My Submitted Requests</a>
</li>

你可能需要这样的东西。此代码可能需要许多改进。但你可以从中得到想法。所以基本上你的父标签需要position:relative;然后你制作你的通知计数器position:absolute;并正确定位和设计它。

推荐阅读