header .banner-left{
height: 60px;
10%;
display: inline-block;
vertical-align: top;
line-height: 60px;
text-align: center;
position: relative;
left: 7%;
background: url(../images/icon-1.png) no-repeat left;
background-size: 16% 50%;
}
header .banner-right{
font-size: 14px;
color: #E53C3C;
height: 60px;
7%;
display: inline-block;
vertical-align: middle;
line-height: 60px;
text-align: center;
cursor: pointer;
position: relative;
left: 50%;
background: url(../images/icon-2.jpg) no-repeat left;
background-size: 15px 18px;
}
inline
【特征】
[1]内容撑开宽度
[2]非独占一行
[3]不支持宽高
[4]代码换行被解析成空格
inline-block(拥有内在尺寸，可设置高宽，不会自动换行)
【特征】
[1]不设置宽度时，内容撑开宽度
[2]非独占一行
[3]支持宽高
[4]代码换行被解析成空格
- 内联元素不能设置宽高度
- 内联块元素可以设置宽高度
把left属性都设置成0后
- relative相对定位，是相对于自己本来原先的位子，定位left值
- 如果把width设置成100%，会占用整行的宽度，最近的元素会出现换行