关于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回答

好帮手慕言

2020-11-18

同学你好,解答如下:

1、设置display: inline-block可以让元素在一行显示,不设置宽度的情况下,元素的宽度是由内容撑开的。

2、设置overflow: hidden;可以清除浮动带来的影响,也可以在子元素超出父元素之后,让超出的内容不显示。

这段代码主要是为了实现横向滚动条

http://img.mukewang.com/climg/5fb4957b09edf6dc04160088.jpg

祝学习愉快~

0

0 学习 · 10739 问题

查看课程