Html 购物车 - 购物车 CSS 中的商品数量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29313879/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Shopping cart - number of items in cart CSS
提问by Abhishek Ghosh
As we all have seen in popular websites , there is a small icon on the top-rightof the icon of cart ! I have to use something like that in my ASP .NET web-page.
正如我们在热门网站上看到的那样top-right，购物车的图标上有一个小图标！我必须在我的 ASP .NET 网页中使用类似的东西。
How do i get this icon to the top-right of the cart icon ..
我如何让这个图标出现在购物车图标的右上角..
The icon of the cart is a normal bootstrap one and the css for the number of items in cart is as follows :
购物车的图标是一个普通的引导程序，购物车中商品数量的 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;
}
NOTE:all the menu items shown in the image including the cart icon are in ul-lilist .
注意：图像中显示的所有菜单项包括购物车图标都在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>
EDIT: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?
编辑：购物车数量几乎是我想要的样子，但它可以在购物车图标的顶部多一点吗？大约3-5px？
回答by Chun
You need to add vertical-align: top;to your counter, in this case to the ID #lblCartCount
您需要添加vertical-align: top;到您的计数器，在这种情况下添加到 ID#lblCartCount
#lblCartCount {
font-size: 12px;
background: #ff0000;
color: #fff;
padding: 0 5px;
vertical-align: top;
}
Here's an online example
这是一个在线示例
