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

Question

正如我们在流行网站上看到的那样，在购物车图标的top-right上有一个小图标！我必须在我的ASP .NET网页中使用类似的东西。

​

​

我如何把这个图标放在购物车图标的右上角.

cart的图标是一个普通的引导程序，cart中的条目数的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便士？

​

​

Answer 1

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

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

这是一个在线示例