flex弹性如何实现内容溢出但不换行

最新推荐文章于 2024-05-09 18:22:16 发布

toocool404

最新推荐文章于 2024-05-09 18:22:16 发布

阅读量6.5k

点赞数 1

本文链接：https://blog.csdn.net/weixin_45941959/article/details/104486759

版权

在父元素上加flex-wrap: nowrap 表示不换行
在子元素上加flex-shrink:0 表示不收缩

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

    ul {
        list-style: none;
    }

    .list {
        width: 750px;
        height: 75px;
        background: #161618;
        display: flex;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    li {
        color: #999999;
        font-size: 32px;
        line-height: 75px;
        flex-shrink: 0;
        margin-right: 50px;
    }

    li:nth-of-type(1) {
        margin-left: 24px;
        color: #a8875b;
    }
</style>

<body>
    <ul class="list">
        <li>精选 </li>
        <li>VIP俱乐部</li>
        <li>电影</li>
        <li>电视剧</li>
        <li>综艺</li>
        <li>动漫</li>
    </ul>
</body>

</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

toocool404

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
flex弹性如何实现内容溢出但不换行

在父元素上加lex-nowrp 表示不换行还要在子元素上加flex-shrink:0 表示不收缩<style> * { margin: 0; padding: 0 } ul { list-style: none; } .list { width: 750px; ...
复制链接

扫一扫