pc端如何不用弹性布局做出同样的效果

我们前端在做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>

这个只是一个解决办法，希望可以给大家解决问题，不喜勿喷，如果有更好的方法，希望各位大佬多提意见

posted @ 2020-05-25 11:14  程序员晓Q  阅读(618)  评论(0)    收藏  举报