设置了 overflow:hidden 但是还是换行了

来源:8-7 实战项目:侧边栏列表交互

慕村4405846

2023-12-01

老师好,我遇到一个棘手的问题 ,请帮忙看看。我的 m-menu__title 的div 超出部分可以隐藏,但是m-menu_sub 的div 不能隐藏 而是换行了。不知道是哪里设置的不对。
/-----------------通用布局(g-)-----------------------/
.g-ant{
display:flex;
}

.g-ant__sider{
flex-shrink: 0;
background-color: #00152A;
width:208px;
min-height: 100vh;
}

.g-ant__sider–closed{
width:90px;
overflow: hidden;
}

.g-ant-sider__wrap{
height: 100%;
display:flex;
flex-direction: column;
}
.g-ant__main{
flex-grow: 1;
display:flex;
flex-direction: column;

}

.g-ant-sider__wrap–fixed{
/固定定位然后 高度是100% 的时候那么就是可视区的高度/
position:fixed;
top:0;
left:0;
width:inherit;
overflow: hidden;
}
.g-ant-sider__head{
flex-shrink: 0;
}

.g-ant-sider__main{
flex-grow: 1;
/* overflow: hidden auto; */
}

.g-ant-sider__foot{
flex-shrink: 0;
color:white;
}
.g-ant-sider__main::-webkit-scrollbar{
width:6px;
height:6px;
}
.g-ant-sider__main::-webkit-scrollbar-thumb{
background-color: #51606d;
border-radius:3px;
}
.g-ant-sider__main::-webkit-scrollbar-track{
background-color: #263849;
border-radius: 3px;
}

/-----------------通用模块(m-)-----------------------/
.m-logo{
display:flex;
align-items:center;
color:white;
padding:16px;
}
.m-logo>img{ /子类选择器不影响后续的元素/
width:32px;
}
.m-logo>h1{
font-weight: 600;
padding-left:12px;
flex-shrink:0;
}

.m-menu{
color:#8c959e;
padding:0 16px;
cursor: pointer;
}
.m-menu__title{
display:flex;
align-items: center;
height: 44px;
column-gap: 10px;
padding:0 15px;
}
.m-menu__title>span{
margin-right:auto;
}

.m-menu–selected .m-menu__title{
color:white;
}
.m-menu__sub{
/* display:none; */
}
.m-menu__sub>li{
height: 40px;
line-height: 40px;
padding-left:45px;
}图片描述

写回答

1回答

西门老舅

2023-12-02

你好,最好给我提供一个完整的代码,可以github,也可以网盘地址,或发邮件给我,new666@qq.com
0
0

前端内功修炼 5大主流布局系统进阶

前端内功修炼:5大主流布局系统进阶

774 学习 · 239 问题

查看课程