如何使小通知计数在元素旁边

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标签）出现在锚标签的左侧吗？我该怎么做？

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;，并正确放置并设计它。