实现不定个数的li等宽自适应ul

想要实现如图的效果，li宽度相等，并且自适应ul的宽度。
li个数不是固定的，图中一行为9个li，当屏幕宽度变小，可能会8个或更少，但在屏幕宽度变化的过程中，要保持li的宽度相等并且始终充满ul的宽度。
应该怎么实现？

阅读 4.3k

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Document</title>
    <style>
        ul{
            padding: 0;
            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;
        }
        @media screen and (max-width: 1200px){
            ul li{
                width: calc(100% / 5 - 10px);
            }
            ul li:nth-child(7n) {
                margin-right: calc(10px + 10px / 4);;
            }
            ul li:nth-child(5n) {
                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>

实现不定个数的li等宽自适应ul

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？