怎样把li标签里遍历出来的这个形状左右对齐呢？

Z时代
2024-01-10
分类：技术分享

怎样把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>
    <style>
        ul{
            padding: 0;
            /* 如果li用的是浮动就去掉 */
            display: flex;
            flex-wrap: wrap;
            overflow: hidden;
            border: 1px solid red;
        }
        ul li{
            background: #eee;
            width: calc(100% / 7 - 10px);
            font-size: 16px;
            list-style: none;
            text-align: center;
            margin-right: calc(10px + 10px / 6);
            margin-bottom: 10px;
            line-height: 30px;
        }
        ul li:nth-child(7n) {
            margin-right: 0;
        }
    </style>
</head>
<body>
    <ul>
        <li>推荐</li>
        <li>科学</li>
        <li>娱乐</li>
        <li>旅游</li>
        <li>生活</li>
        <li>分享</li>
        <li>城市</li>
        <li>分享</li>
        <li>技能</li>
    </ul>
</body></html>