关于display:inline-block,overflow:hidden;的问题
来源:4-2 sass案例(2)
张月白
2020-11-18 10:34:52
# 具体遇到的问题
不是很能理解display:inline-block和overflow:hidden在代码中起到的作用,inline-block具体有什么特性呢?
overflow:hidden不是防塌陷吗,它还有什么特性吗?不让内部元素超出其长度是什么意思?
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码,切记添加代码注释(请勿截图)
在这里输入代码,可通过选择
@import 'reset.scss';
$baseFontSize:17px;
$redColor:#d43d3d;
$img:'assets/';
.header{
height:45px;
background-color:$redColor;
.title_logo{
width:100px;
height:100%;
margin:0 auto;
background:{
position:center;
size:contain;
repeat:no-repeat;
image:url($img+'wap_logo@3x_581de69e.png');
}
}
}
.top_bar{
height:34px;
background-color:#f4f5f6;
//x轴内容超出时可以滚动
overflow-x:auto;
//y轴不可以滚动
overflow-y:hidden;
.top_menu_list{
//内容超出时不换行
white-space:nowrap;
//不让内部元素超出其长度
overflow:hidden;
height:100px;
//样式依赖于子元素,子元素的宽度撑开,
//超过父元素时,会出现滚动条
display:inline-block;
.btn{
padding:8px;
display:inline-block;
font-size:$baseFontSize;
}
}
}【代码语言】突出显示
.top_menu_list{
//内容超出时不换行
white-space:nowrap;
//不让内部元素超出其长度
overflow:hidden;
height:100px;
//样式依赖于子元素,子元素的宽度撑开,
//超过父元素时,会出现滚动条
display:inline-block;
.btn{
padding:8px;
display:inline-block;
font-size:$baseFontSize;
}
1回答
同学你好,解答如下:
1、设置display: inline-block可以让元素在一行显示,不设置宽度的情况下,元素的宽度是由内容撑开的。
2、设置overflow: hidden;可以清除浮动带来的影响,也可以在子元素超出父元素之后,让超出的内容不显示。
这段代码主要是为了实现横向滚动条
祝学习愉快~
相似问题