购物车 - 购物车CSS中的项目数量

Question

正如我们在热门网站上看到的那样，购物车图标的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-5px？

Answer 1

您需要将vertical-align: top;添加到您的计数器，在这种情况下添加到ID #lblCartCount

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

这是 online example