之前用的display属性的值只会用inline或者block,这两个值的显示形式如下：
（1）inline：设置了display:inline;属性的元素，不会自动换行，并且即使元素设置了宽高也没有效果，属于行内元素，典型的inline元素有<span>, <a>, <label>, <input>, <img>, <strong> 和<em> （2）block:设置了display:block;属性的元素，会自动换行，并且可以设置其高宽，属于块级元素，典型的block元素有：<div>, <p>, <h1>, <form>, <ul> 和 <li> 例子： <style> ul{list-style: none;} li{display: inline;width:200px;height: 30px;text-align: center;line-height: 30px;background: #ccc;} </style> </head> <body> <ul> <li>test1</li> <li>test2</li> <li>test3</li> <li>test4</li> </ul> </body>实现效果：
可以看到，即使我们给每一个li元素设置了相应的宽和高，显示的效果依然是背景色只是包裹li元素内的字所撑开的宽度和高度
如果将其改为display:block;效果如下：
默认情况下，inline-block的表现形式和inline一样，只有在给元素设置了宽和高的时候才会显示出差别
然而到了这里，故事并没有结束：
现在一些流行的浏览器都支持inline-block，但是IE6&7并不支持，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表症。对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout，而它本就是行布局，所以触发后，块元素依然还是行布局，而不会如Opera中块元素呈递为内联对象。
解决方案（1）：
ul{list-style: none;}
li{display: inline-block;width:200px;height: 30px;text-align: center;line-height: 30px;background: #ccc;border:1px solid black;} li{display: inline;}即设置两次，这个hack只是针对IE7以下版本.
解决方案（2）：
ul{list-style: none;}
li{display: inline;zoom:1;width:200px;height: 30px;text-align: center;line-height: 30px;background: #ccc;border:1px solid black;}这个也是针对IE7及以下版本