如上圖所示，在PC端，每行三個元素，多余的換行。

HTML

<!-- 設(shè)置每行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%;}

實現(xiàn)原理

設(shè)置最外層ul元素的寬度，定義里面每個li元素的寬度。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的PC端设置每行固定三个元素多余换行的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。