定位量程元素不会改变div宽度

Question

我正在创建一个导航栏，它将以与Facebook相同的方式显示通知（带有数字的小红圈）。

使用span元素显示未读通知的数量，如下所示：

然后我就这样定位：

当然，像这样定位span元素会留下我想要消除的右边空间。如何实现这一目标？

我想我可以使用JQuery将span元素的位置设置为与钟形图标的位置（加上偏移量）相同但是必须有一个更简单的方法吗？

我的导航栏只包含anchor标记内的nav个标记。我没有使用列表元素。

以下是导航栏中的通知链接：

  <a href="notifications.php"> 
        <i class="icon fa  fa-bell-o fa-lg"></i> <!-- bell icon -->
        <span><?php echo $num_notifications; ?></span> <!-- number -->
  </a>

span元素的CSS：

 position: relative;
 left: -14px;
 top: -8px;

Answer 1

应用匹配的负右边距：

margin-right: -14px;

Answer 2

你可以让位置绝对。这将定位relative to the first parent element that has a position other than static read more here.

请注意，您可能需要对锚标签应用某种定位。