我们前端在做pc端li排列的时候，最方便的就是display：flex；弹性布局，几行代码解决问题，但随之而来的一个更恶心的问题摆在你面前，兼容性。你说不考虑这个东西吧，想到现在的用户很多还在用ie，考虑这个东西吧，太麻烦，而且会造成代码冗余。所以还是需要一个解决办法，废话不多说，上源码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>li排列问题</title> </head> <style type="text/css"> * { margin: 0; padding: 0; } .box{ width: 950px; background-color: red; } .box ul{ font-size: 0; } .box ul li{ width: 150px; height: 150px; background-color: blue; display: inline-block; font-size: 20px; margin-right: 10px; margin-bottom: 10px; } /* 最重要的代码 */ .box ul li:nth-child(6n){ margin-right: 0; } </style> <body> <h3>当你想让li横向6个排列的时候，无奈最后一个有外边距，后台的数据你也不能确定到底有多少个li时,请用以下方法</h3> <div class="box"> <ul> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li><li>1</li> <li>1</li> <li>1</li><li>1</li> <li>1</li> <li>1</li> </ul> </div> </body> </html>
这个只是一个解决办法，希望可以给大家解决问题，不喜勿喷，如果有更好的方法，希望各位大佬多提意见
原文：https://www.cnblogs.com/qsniubi/p/12955810.html