1使用
(1) display:inline-block可以用来处理行内元素不等高对齐排列问题(列表布局),防止出现过高元素下方没有元素排列,而是被挤到该元素的右下方。(vertical-align: top/bottom;设置对齐的基准线)
(2)修正IE6中浮动元素的双边距问题
(3)水平放置多个类似块blo ck元素而不需要使用float
(4)使一个inline元素具有高宽边距而其依然能够保持inline
2. 水平间隙问题
关于使用display:inline-block带来的水平间隙问题,产生该水平间隙的原因主要是HTML中的换行符、空格符、制表符等合并为空白符,在字体不为0的情况下,空白符将会产生一定的宽度,即产生了元素间的水平间隙。
解决该水平间隙的方法有:(1)字体大小设置为0,即font-size:0;此时要注意父元素字体大小设置后会影响到子元素字体大小,要记得将子元素字体大小重置!(2)合理地设置letter-spacing的值(负值)!(3)合理地设置word-spacing的值(负值)!(4)前一个标签的结束标签和后一个标签的开始标签连续使用,或者后一个嵌套标签的结束标签连续使用,不空格!合理的使用(1)(2)(3)(4)的css hack可以解决display:inline-block后元素间的水平间隙问题。
3. IE下实现display:inline-block的方法
(1)先使用display:inline-block触发块元素,然后再定义display:inline,让块元素呈递为内联对象。两个display要放在两个css声明中才能生效。
div {display:inline-block;...}
div {display:inline;}
(2)直接让块元素设置为内联对象display:inline;再触发layout,如zoom:1;
div {display:inline; zoom:1;...}