请使用firefox,chrome等最新浏览器浏览本站。

基于display:inline-block的列表布局

css3 阿豹 386次浏览 0个评论 扫描二维码

拜读了 张鑫旭的拜拜了,浮动布局-基于display:inline-block的列表布局后,个人对inline-block实现列表布局有了一些认识和总结。

我们都知道用float实现列表布局必须给浮动元素限高。
使用inline-block实现列表布局,会使得每一行所有的inline元素和inline-block元素会共同形成一个line boxes,这个line box的高度由里面最高的元素决定。所以,即使inline-block属性的列表元素高度异常,撑开的是整个line boxes的高度,因而,不会与下一行的列表元素发生错位。

兼容性:
对于IE8+浏览器,直接使用:

display:inline-block;

对于IE6,IE7
1.如果是block元素display成inline-block元素:

*display:inline;
*zoom:1;

2.如果是inline元素display成inline-block元素:

display:inline-block;

demo1

查看demo1我们可以看到inline-block元素之间存在间隙。这是由于inline-block元素中间的换行符会自动转成空格符来显示。
解决方法:
方法一.inline-block元素之间不要出现换行:
例如:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

可以写成:

<ul>
    <li>1</li><li>
    2</li><li>
    3</li><li>
    4</li>
</ul>

这种方法,HTML代码的可读性很不好。

方法二:
既然inline-block元素之间的换行符被转成了空格符。我们可以给父元素设置font-size:0;再给子元素重设字体大小。
demo2
经过测试所有主流浏览器均支持这种方法。


喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到