9.1 让多个元素的一行显示的方法

  • display:inline; // 转换为行内元素 但是设置宽高属性之后不起作用
  • display:inline-block; // block可以让元素在一行显示,但是他会受空格/换行建,会产生默认间距
    • 去掉空格和换行建的影响 让标签都在一行 (不推荐 阅读性不好)
    • 给父元素增加一个 font-size:0,然后给子元素增加一个 font-size:14px;(但是我们还会发现一个问题:元素里面如果有文字 文字消失,然后在子元素增加一个属性即可)
  • float:left/rigjt; // 但是我们清浮动

** [display:inline-block元素的特点]**

  • 让盒子横向排列
  • vertiacal-align 属性会影响到inline-block元素,你可能会把他的值设置为top
  • 你需要设置每一列的宽度
  • 如果html源代码中元素之间有空格,那么列与列之间会产生空隙
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
*{
margin:0px;
padding:0px;
}

.content1{
display:inline;
width:200px;
height:100px;
backgournd-color:yellow;
}

.content2{
display:inline;
width:200px;
height:100px;
backgournd-color:yellow;
}

...

<div class="content1">内容1</div>
<div class="content2">内容2</div>

inline-block 在ie7 不兼容

直接让块元素设置为内联对象呈递(设置属性display:inline),然后触发块元素的layout(如:zoom:1 或float属性等)。代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
/*推荐:IE6、7*/ 
div {
display:inline-block;
*zoom:1;
*display: inline;
}

/*推荐*/
div {
display:inline-block;
_zoom:1;
_display:inline;
}

解释: display:inline-block照顾的是ie8+的浏览器,这是正常的设置,在低版本的ie设置下行内块有2个条件,一个行内,一个设置宽高,触发layout即可设置宽度,而div设置了宽度后还是会黄航,layout不是为了水平而设置,所以为了块级元素转行内块上加上”display:inline”属性,但是display:inline不会触发layout,于是加上zoom:1重新触发layout,于是形成了一个跨域设置宽高的行内元素