PC端设置每行固定三个元素多余换行

如上图所示，在PC端，每行三个元素，多余的换行。

HTML

  <!-- 设置每行3个元素 -->
   <div class="test-wrap">
       <ul class="cf more_box experience" id="experience">
           <li><img src="https://www.csgo.com.cn/data/images/level01.png" alt="Recruit Rank 1" title="Recruit Rank 1">
               <p>新兵-1级</p>
           </li>
           <li><img src="https://www.csgo.com.cn/data/images/level01.png" alt="Recruit Rank 2" title="Recruit Rank 2">
               <p>新兵-2级</p>
           </li>
           <li><img src="https://www.csgo.com.cn/data/images/level01.png" alt="Recruit Rank 3" title="Recruit Rank 3">
               <p>新兵-3级</p>
           </li>
           <li><img src="https://www.csgo.com.cn/data/images/level01.png" alt="Recruit Rank 4" title="Recruit Rank 4">
               <p>新兵-4级</p>
           </li>
           <li><img src="https://www.csgo.com.cn/data/images/level01.png" alt="Corporal Rank 5"
                   title="Corporal Rank 5">
               <p>下士-5级</p>
           </li>
           <li><img src="https://www.csgo.com.cn/data/images/level01.png" alt="Corporal Rank 6"
                   title="Corporal Rank 6">
               <p>下士-6级</p>
           </li>
           <li><img src="https://www.csgo.com.cn/data/images/level01.png" alt="Corporal Rank 7"
                   title="Corporal Rank 7">
               <p>下士-7级</p>
           </li>
           <ul>
   </div>

CSS

ul,
   li,
   div,
   dl,
   dt,
   dd {
       list-style: none;
   }

   .test-wrap {
       width: 800px;
       margin: 0 auto;
       clear: both;
   }

   .test-wrap .experience li {
       float: left;
       width: 236px;
       margin: 0 15px 15px 0;
       border: 1px solid #272a31;
       background-color: #121516;
       height: 232px;
       position: relative;
   }

   .test-wrap .experience img {
       display: block;
       margin: 30px auto 0;
   }

   .test-wrap .experience p {
       height: 46px;
       line-height: 46px;
       text-align: center;
       border-top: 1px solid #272a31;
       font-size: 18px;
       color: #ccc;
       background-color: #1b2026;
       display: block;
       position: absolute;
       bottom: -18px;
       left: 0;
       width: 100%;
   }

实现原理

设置最外层ul元素的宽度，定义里面每个li元素的宽度。