就这个
<div class="jingpin">
<i class="shopcart"></i> 我的购物车
<span class="rightmore"> ></span>
<i class="count">8</i>
</div>
布局的话:
.jingpin {
position: absolute;
left: 122px;
top: 20px;
width: 138px;
height: 34px;
border: 1px solid #dfdfdf;
background-color: #f7f7f7;
line-height: 34px;
font-size: 12px;
text-align: center;
color: #e60012;
}
.jingpin .shopcart {
font-family: "icomoon";
color: red;
}
.jingpin .rightmore {
margin-left: 5px;
}
.jingpin .count {
position: absolute;
left: 106px;
top: -5px;
height: 14px;
padding: 0px 3px;
/* 都垂直居中了,就不要设置上下的padding 了 */
background-color: #e60012;
text-align: center;
line-height: 14px;
color: #fff;
border-radius: 7px 7px 7px 0px;
color: #fff;
}
其中圆角的设置最精细,
而且count 定位设置left 而不是right
还有就是,行内元素是可以设置左右margin 值的!