vue项目 css实现所有文字菜单在一行超出屏幕滚动效果

wx479

已于 2024-02-02 16:55:14 修改

阅读量1.5k

点赞数

文章标签： css 前端 html

于 2022-12-10 18:26:55 首次发布

本文链接：https://blog.csdn.net/wx479/article/details/128267658

版权

效果图实现如下，所有菜单在同一行显示。

html

<div class="container">
       <div class="menu-item">
            <div class="item" v-for="(item,index) in list" :key="index">{{ item.name }}</div>
       </div>
</div>

javascript

data(){
        return{
            list:[
                {"id":1, "name":"壮丽的树"},
                {"id":2, "name":"寺庙&宫殿"},
                {"id":3, "name":"中国城堡&桃花树"},
                {"id":4, "name":"蓝色的海"}
            ]
        }
    },

css

<style scoped lang="scss">
    .container {
        padding: 15px;
        .menu-item{
            width: 100%;
            overflow-x: auto;
            display: flex;
            align-items: center;
            gap:20px;
            margin-top: 30px;
            .item{
                white-space: nowrap;  /* 要设置文字不换行，不然文字就会因为宽度不够被挤到下一行*/
                padding: 12px 32px;
                font-size: 22px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
                line-height: 32px;
                background: #F2F2F2;
                border-radius: 28px;
                box-sizing: border-box;
                text-align: center;
            }
}
    }
</style>