列表排列效果-利用overflow:hidden隐藏间距实现

最新推荐文章于 2022-07-24 13:06:56 发布

blink555

最新推荐文章于 2022-07-24 13:06:56 发布

阅读量201

点赞数

分类专栏：前端基础文章标签： html html5 css

本文链接：https://blog.csdn.net/weixin_44325613/article/details/115482212

版权

前端基础专栏收录该内容

14 篇文章 0 订阅

订阅专栏

未实现效果:
在这里插入图片描述
每个li宽度为270px ,实现每行4个li，之间间距为30px

因为box宽度为1170px ,ul的宽度为父元素100%,故ul宽度为1170px
li:2704+304(margin-right) = 1200px
ul实际需要的宽度为1200px,因为ul容不下li后，自动换行。

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .box {
            width: 1170px;
            height: 500px;
            margin: 30px auto;
            background-color: tomato;
        }


        /* ul {
            width: 1200px;
        } */

        li {
            float: left;
            width: 270px;
            height: 100px;
            /* 元素之间的间距 */
            margin-right: 30px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
    </div>
</body>

解决:
给ul添加正常容下4个li
在这里插入图片描述

给ul的父元素添加overflow：hidden
在这里插入图片描述

完整代码

        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .box {
            width: 1170px;
            height: 500px;
            margin: 30px auto;
            background-color: tomato;

            /* 隐藏 超出的ul部分 */
            overflow: hidden;
        }


        ul {
           /* ul实际需要的宽度;*/
            width: 1200px;
            
        }

        li {
            float: left;
            width: 270px;
            height: 100px;
            /* 元素之间的间距 */
            margin-right: 30px;
            margin-bottom: 10px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
    </div>
</body>

以后只需要设置每个box的宽度(安全区)和ul的实际需要宽度以及li的高度宽度和margin就可以实现元素排列

blink555

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
列表排列效果-利用overflow:hidden隐藏间距实现

未实现效果:每个li宽度为270px ,实现每行4个li，之间间距为30px因为box宽度为1170px ,ul的宽度为父元素100%,故ul宽度为1170pxli:2704+304(margin-right) = 1200pxul实际需要的宽度为1200px,因为ul容不下li后，自动换行。 <style> * { margin: 0; padding: 0; } li {
复制链接

扫一扫