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

Question

我有以下 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 标签)出现在 anchor 标签的左侧？我该怎么做？

Answer 1

<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; 你正确地定位它并设计它。