display inline-block 间隔

1.如果li横排用display:inline-block; 则li之间不能有间隔 必须连着一起,所以才一般用float:left;

.today-wrap{
  position: relative;
  background: $white;
  height: 220px;
  padding-top: 40px;
  padding-bottom:40px;
  li{
    float: left;
    width: 50%;
    &:last-child{
      &:before{
        content: '';
        position: absolute;
        left:50%;
        width: 1px;
        height: 80%;
        top:20px;
        background:$grey;
      }
    }
  }
  .today-recommend{
    text-align: center;
    color: $blue;
    .recommend-num{
      font-size: 56px;
    }
    .recommend-unit{
      font-size: 24px;
    }
    .recommend-name{
      font-size: 26px;
      color:$grey;
    }
  }

}

  

<div class="today-wrap">
        <ul>
            <li class="today-recommend">
                <a href="#">
                    <div>
                        <span class="recommend-num">32</span>
                        <span class="recommend-unit">笔</span>
                    </div>
                    <div class="recommend-name">
                        今日推广订单
                    </div>
                </a>
            </li>
            <li class="today-recommend">
                <a href="#">
                    <div>
                        <span class="recommend-num">260.00</span>
                        <span class="recommend-unit">元</span>
                    </div>
                    <div class="recommend-name">
                        今日获得收益
                    </div>
                </a>
            </li>
        </ul>

    </div>

  

posted @ 2017-12-12 17:26  南侠书生  阅读(212)  评论(0编辑  收藏  举报