导读：以前都使用display:block很少使用display:inline-block，近期写样式有时候为了方便我也使用inline-block，不想竟然有个大问题，每个元素之间多了一个空白，而这个...
以前都使用display:block很少使用display:inline-block，近期写样式有时候为了方便我也使用inline-block，不想竟然有个大问题，每个元素之间多了一个空白，而这个空白正是由于换行导致的：
代码如下
复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
span {
margin: 0;
padding: 0;
display: inline-block;
width: 50px;
height: 20px;
background: red;
}
</style>
</head>
<body>
<span></span><span></span>
<span></span>
<span></span>
</body>
</html>
解决办法
把内联标签表现成块并且不换行只能按照老方法display:block后再float它。
解决办法
加上 font-size:0; 和font-size:12px; 不兼容safari浏览器，用行内元素李欢li，ie6下面中间有右间距1像素。
ul.test1{width:700px;text-align:center;list-style: none outside none;background:#eee;padding:0 10px;font-size:0;}
ul.test1 li{display:inline-block;*display:inline;zoom:1;background:#f60;padding:5px;font-size:12px;}
