css 去掉ul和li的默认样式，并自定义新的布局样式，多行多列。

效果图：代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title&gt

草字

17140人浏览 · 2020-12-11 09:44:35

草字 · 2020-12-11 09:44:35 发布

效果图：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;    //去掉默认内边距，也就是ul标签左边的内边距40px；
            margin:0;    //去掉li的外边距。
        }
        .container{
            width:400px;
            height:400px;
            border:1px solid red;
        }
        ul{
            list-style:none;    //去掉标签默认的左边符号
            display:flex;
            flex-wrap:wrap;
        }
        li{
            list-style-type:none;    //去掉标签默认的左边符号
            text-align: center;
        }
        li::before{    //使用伪类插入符号
            content: "●";
            font-size: 12px;
            color: #F5CC00;
            padding-right:8px;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul>
            <li style="width:33.3%;">校园渠道</li>
            <li style="width:33.3%;">广告投放</li>
            <li style="width:33.3%;">活动推广</li>
            <li style="width:33.3%;">营销策划</li>
            <li style="width:33.3%;">摆展促销</li>
            <li style="width:33.3%;">社群营销</li>
        </ul>
    </div>
</body>
</html>