我用的方法是添加幾個空的的 li 在最后面。空 li 的數量按照你的頁面排版來給，然后減少一個li。例如，我的頁面排版，一行放四個 li ，那我的空 li 就給三個。因為給多了也看不出效果，夠用就好。你可以放多幾個也行，不影響。因為，按照我的頁面排版來說，我最后一行，只要可以補滿四個 li 就滿足我的需求了，給多用不上。
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { padding: 0; margin: 0; } ul { width: 1000px; display: flex; justify-content: space-between; flex-wrap: wrap; list-style: none; background-color: rgba(100, 155, 200, 0.2); margin: 0 auto; } li { width: 230px; height: 200px; background-color: red; margin-top: 20px; } .item_empty { height: 0; margin-top: 0; } </style> </head> <body> <div id="app"> <ul> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li class="item_empty"> </li> <li class="item_empty"> </li> <li class="item_empty"> </li> </ul> </div> <script> </script> </body> </html>
效果圖
結束