等间距布局

html：

 <ul class="clearfix">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

css：

  *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;//必须，避免padding、border的影响
        }
        .clearfix::after{
            display: block;
            content: '';
            height: 0;
            overflow: hidden;
            clear: both;
        }
       ul{
           list-style: none;
       }
       li{
           float: left;
           width: 25%;
           text-align: center;
           height: 150px;
           line-height: 150px;
           border: 1px solid red;
            border-right: 20px solid red;//用border-right表示中间的边距
       }
       li:nth-child(4n){
           border-right: 0;//最右边没有边距
       }