您的位置:主页 > 新闻资讯 > 常见问题 >
CSS中display:inline-block的写法
发表日期:2017-10-13 02:14   文章编辑:flhfelygo    浏览次数:
 

display:inline-block感觉与display:table-cell有些相似,例如对内部元素的包裹性。但是,由于display:inline-block最大的不同就是其没有父元素的匿名包裹特性,这使得display:inline-block属性的使用非常自由,可与文字,图片混排,可内嵌block属性元素,可以可以置身于inline水平的元素中。可谓黑白通吃,左右逢源。

inline-block属性的元素适用于inline box模型,所以,当其中的列表元素高度不一时,是不会有错位的。关于line box模型,我在之前的“css行高line-height的一些深入理解及应用”第二部分提到了,以及前面“CSS float浮动的深入研究、详解及拓展(一)”一文的“浮动的破坏性”部分中做过比较详细的介绍。一言以蔽之,就是每一行所有的inline元素和inline-block元素会共同形成一个line boxes,这个line box的高度由里面最高的元素决定。所以,即使inline-block属性的列表元素高度异常,撑开的是整个line boxes的高度,因而,不会与下一行的列表元素发生错位。如下面的我自己画得拙劣的示意图所示的:

 

根据一些前辈的说法,IE6/7不支持display:inline-block属性,只是可以让标签有类似于inline-block的属性,起初我也是接受这种说法的,不过后来又表示了怀疑,最近使用text-align:justify;做测试的时候的一些样式表现证实了:确实IE6/7是不支持display:inline-block属性,只是让其表现的跟inline-block一样,尤其对于inline水平的元素,其表现度可以用perfect一词来形容了。

对于IE8+以及现代浏览器,直接使用:

{display:inline-block;}
就可以了,支持任意水平的元素。

对于不支持的IE6/7浏览器该怎么办呢?如果是inline水平的元素(如a标签,span标签之类)跟上面一样,直接:

{display:inline-block;}
就可以了,对于这两个浏览器,其功效与*zoom:1;是一样的。

如果是block水平的元素,例如li标签。则需要多点代码,目前我知道的方法有两个,如下所示:

li {display:inline-block;...}
li {display:inline;}
或者是:

li{display:inline; zoom:1;...}
block水平的inline-block化的元素与inline水平的在表现层又是有差异的,这个后面会谈到。

标签:    
如没特殊注明,文章均为博路网络原创,转载请注明来自https://www.boroad.net/news/changjianwenti/2017/1013/129.html