购物车 - 车中的CSS项目数量 [英] Shopping cart - number of items in cart CSS

问题描述

大家都在热门网站看到，上有右上方的购物车图标的小图标！我必须使用类似的东西在我的ASP.NET网页。

As we all have seen in popular websites , there is a small icon on the top-right of the icon of cart ! I have to use something like that in my ASP .NET web-page.

我如何得到这个图标车图标的右上角。

How do i get this icon to the top-right of the cart icon ..

车的图标是一个正常的自举之一，为项目数的CSS的车如下：

The icon of the cart is a normal bootstrap one and the css for the number of items in cart is as follows :

.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丽列表

NOTE: all the menu items shown in the image including the cart icon are in ul-li list .

 <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？

The cart count is just nearly how i want it to be , but could it go a bit more to the top of the cart icon ? like about 3-5px?

推荐答案

您需要添加垂直对齐：首位; 你的柜台，在这种情况下的ID #lblCartCount

You need to add vertical-align: top; to your counter, in this case to the ID #lblCartCount

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

下面是一个 在线例如

Here's an online example

这篇关于购物车 - 车中的CSS项目数量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！