【电商5】header shopcar

• 盒子随内容变大

html

        <div class="shopcar iconfont icon-gouwuche icon-zhankai1">
            我的购物车
            <i class="count">8000000</i>
        </div>

common.css

.shopcar {
    position: absolute;
    right: 60px;
    top: 25px;
     140px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border: 1px solid #dfdfdf;
    background-color: #f7f7f7;
}

.shopcar .count {
    position: absolute;
    top: -5px;         /*距离顶部距离*/
    left: 105px;      /*撑开是向右延伸的*/


    /*盒子随内容变大*/
    height: 14px;
    padding: 0 5px;           /*不是margin哦*/

    line-height: 14px;
    color: #fff;
    background-color: #e60012;
    border-radius: 7px 7px 7px 0;
}