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


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

回答

grid 布局 或者 flex

<!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 的全部内容， 来源链接： utcz.com/a/39675.html

回到顶部