如何让块级元素实现display:inline-block
关于display:inline-block，手册上是这样解释的：将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内。这个属性算是有点冷门吧，也许有些朋友平时也不怎么会用到这个属性。不过在某些情况下给一些内联元素用display:inline-block，比如说a标签或span标签，会省不少工夫，比如说之前发的一个滑动门效果就是这样用的。
不过在这里又发现了一个问题，在块级元素上这个属性无效，比如说加在DIV上但此DIV还会是行布局。其实在这里也只是想深入研究一下而已，在实际项目中完全可以用别的方法避免这个问题的产生。所以也查阅了不少资料，其实内联元素也并非是真正支持display:inline-block，只是因此触发了hasLayout属性，而使其拥有了display:inline-block 的特性。而应用到块元素上时，同样也只是被触发了hasLayout属性，所以还是分行布局。而关于hasLayout，可能有很多朋友会觉得陌生，大家可以参阅一下这篇文章《On having layout》，原文件的链接好像有点问题，我这里链的是蓝色理想上的一篇转载。
接下来就应该说说如何解决这个问题了，有两种方法。
1、先定义display:inline-block ，再定义display:inline，不过要分开定义才有效，这好像是IE的一个BUG。
1 2 | div {display:inline-block;...} div {display:inline;} |
2、直接定义display:inline，然后再触发块级元素的hasLayout，如何触发在之前提到的那篇文章有详细说明。
1 | div {display:inline; zoom:1;...} |
2条留言 立即发表评论
display:inline-block 这个属性还是很好用的,很多地方都会用到,比直接block方便
还是各有各的用处的咯。block的话会换行，加上float后会有inline-block的表像，不过没法居中。我也只是探讨一下这个问题而已，实际操作中，很少有碰到需要给块级元素加inline-block的时候，大多数情况都是用在内联元素上，可以简化布局结构。