html - 购物车-购物车CSS中的元素数

正如我们在流行网站上看到的，购物车图标的top-right上有一个小图标！我必须在我的ASP.NET网页中使用类似的东西。
如何将此图标放到购物车图标的右上角。。
购物车的图标是正常的引导图标，购物车中项目数的css如下所示：

.badge {
  padding-left: 9px;
  padding-right: 9px;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  border-radius: 9px;
}

.label-warning[href],
.badge-warning[href] {
  background-color: #c67605;
}

注意：图像中显示的所有菜单项（包括购物车图标）都在ul-li列表中。

 <li>
      <a href="Cart1.aspx" class="icon-shopping-cart" style="font-size: 25px"><asp:Label ID="lblCartCount" runat="server" CssClass="badge badge-warning"  ForeColor="White"/></a>
</li>

编辑：购物车的计数几乎就是我想要的那样，但它能更接近购物车图标的顶部吗？大约3-5倍？

最佳答案

您需要将vertical-align: top;添加到您的计数器，在本例中是添加到ID#lblCartCount

#lblCartCount {
    font-size: 12px;
    background: #ff0000;
    color: #fff;
    padding: 0 5px;
    vertical-align: top;
}

这里有一个online example