display:inline-block的妙用！！列表布局！！

如下图：像这种列表布局我们一般用 float:left; 设置宽度和高度就OK了。

但是，如果高度不同或者文字字数不同呢，再用float:left;布局就全乱了。如下图：

现在，我们可以利用display:inline-block;完美的解决这个问题。如下图：

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
* { margin:0; padding:0; }
ul { list-style:none; font-size:0; }
li { display:inline-block; *display:inline; zoom:1; width:200px; font-size:14px; vertical-align:top; }
</style>
</head><body><ul><li><img src="http://static.cnblogs.com/images/logo_small.gif" alt=""><p>代码改变世界</p></li><li><img src="http://static.cnblogs.com/images/logo_small.gif" alt=""><p>代码改变世界</p><p>代码改变世界</p></li><li><img src="http://static.cnblogs.com/images/logo_small.gif" alt=""><p>代码改变世界</p></li><li><img src="http://static.cnblogs.com/images/logo_small.gif" alt=""><p>代码改变世界</p></li><li><img src="http://static.cnblogs.com/images/logo_small.gif" alt=""><p>代码改变世界</p></li><li><img src="http://static.cnblogs.com/images/logo_small.gif" alt=""><p>代码改变世界</p><p>代码改变世界</p></li><li><img src="http://static.cnblogs.com/images/logo_small.gif" alt=""><p>代码改变世界</p></li><li><img src="http://static.cnblogs.com/images/logo_small.gif" alt=""><p>代码改变世界</p></li><li><img src="http://static.cnblogs.com/images/logo_small.gif" alt=""><p>代码改变世界</p></li><li><img src="http://static.cnblogs.com/images/logo_small.gif" alt=""><p>代码改变世界</p><p>代码改变世界</p></li><li><img src="http://static.cnblogs.com/images/logo_small.gif" alt=""><p>代码改变世界</p><p>代码改变世界</p><p>代码改变世界</p><p>代码改变世界</p></li><li><img src="http://static.cnblogs.com/images/logo_small.gif" alt=""><p>代码改变世界</p></li><li><img src="http://static.cnblogs.com/images/logo_small.gif" alt=""><p>代码改变世界</p></li><li><img src="http://static.cnblogs.com/images/logo_small.gif" alt=""><p>代码改变世界</p></li><li><img src="http://static.cnblogs.com/images/logo_small.gif" alt=""><p>代码改变世界</p></li><li><img src="http://static.cnblogs.com/images/logo_small.gif" alt=""><p>代码改变世界</p></li>
</ul></body>
</html>

使用inline-block更大的优势在于：让元素实现block特性又不失inline 基础，可以像普通行内元素一样操作这个块，可以实现很多float无法实现的效果。

解释一下代码：

1、ul { list-style:none; font-size:0; } 　

font-size:0; 是为了去掉 <li>之间由于换行而产生的3px的间距。当然了，解决这个问题方法不只一个，比如：也可以用margin-right:-3px;解决。

2、由于ie6、7不支持display:inline-block，
　　所以我们用*display:inline; zoom:1;解决这个问题。

知识扩展：http://www.zhangxinxu.com/wordpress/?p=2357

http://ued.alipay.com/wd/2008/10/29/%E5%9F%BA%E4%BA%8Edisplaytable%E7%9A%84css%E5%B8%83%E5%B1%80/

display:inline-block的妙用！！列表布局！！相关推荐

[CSS]详解display:inline | block |inline-block的区别
2019独角兽企业重金招聘Python工程师标准>>> [CSS]详解display:inline | block |inline-block的区别[点评网站][发布新闻][申请专栏 ...
display:inline、block、inline-block
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
HTML无序列表布局
1.图片和文字在同一行 <img src="image/icon-youxiang.png" alt="" class="dis_ver&quo ...
display:inline inline-block block
块级元素:默认设置display:block的元素<div>.<h1>~<h6>.<p>.<ul>.<ol>.<li> ...
拜拜了,浮动布局-基于display:inline-block的列表布局
一.一抹前言没有爱的日子,时间如指尖细沙,不知不觉就流逝了.写"CSS float浮动的深入研究.详解及拓展(一)"和"CSS float浮动的深入研究.详解及拓 ...
display的block、none、inline属性及解释
常会用到display对应值有block.none.inline这三个值参数: block :块对象的默认值.用该值为对象之后添加新行.之前也添加一行. none :隐藏对象.与visibility ...
display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
display:inline、block、inline-block的区别以及该死的ie6兼容问题
2019独角兽企业重金招聘Python工程师标准>>> display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...
关于css的display:flex inline block inline-block和float
1.解释一下display的几个常用的属性值,inline , block, inline-block inline(行内元素):使元素变成行内元素,拥有行内元素的特性,即可以与其他行内元素共享一行, ...

display:inline-block的妙用！！列表布局！！

display:inline-block的妙用！！列表布局！！相关推荐

最新文章

热门文章