CSS布局之display:inline-block

写这篇文章前在网络搜索 inline-block 的相关介绍,国外的博文集中在2010年,国内集中在2012年。

认识 inlne-block

我们都知道 HTML 元素分为块元素(block element)和内联元素(inline element)。在常规流(Normal flow)中块元素独占一行从上至下排列,内联元素从左到右挤在一行直至排列到下一行。对元素设置display:inline-block后,它的父辈容器会将它看成 inline 元素并允许它和其他 inline 元素挤在一行。但是元素本身会将自己作为块元素存在,可以设置 width,height等块元素才有的属性。

inline-block行内块元素 使用示例A:

<style type="text/css">  
li {display:inline-block;text-align:center;}  
a  {text-decoration:none;display:block;  
width:80px;padding:10px;background-color:#eee;}  
</style>  
<ul>  
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

示例A效果: inline-block制作导航

你可能会发现无序列表前点号标记不见了,这是因为列表项本身有个默认的 display 值 list-item 。当改变它的 display 值为inline-block时,自然也就删除了列表项标记。

inline-block 和 float 的区别

浮动元素会脱离文档流,而 inline-block 元素仍在文档流内。 具体查看demo

inline-block 的缺陷及解决

上面的示例A效果图,各个 li 之间有几个像素宽度的空白间隙。这是因为 inline-block 元素拥有内联元素的所有特性,源代码里标签间的换行、空格都会在浏览器展示时产生一个空格间隙。只要把它们写在一行里就不会有空格。

<ul><li><a href="#home">Home</a></li><li><a href="#news">News</a></li><li><a href="#contact">Contact</a></li><li><a href="#about">About</a></li></ul>  

但这种做法显然不适合生产使用,这里只是用来距离帮助理解产生空格的原因。空格在本质上是一个字符,如果对 inlne-block 元素的父元素设置font-size:0,然后再单独为 inline-block 元素设置字体。这种元素间的空白间隙自然就消失了。感谢现在是2015年,这种方式在主流浏览器中均表现完美。safari 除外!在safari 中需对父元素加个letter-spacing: -4px,这里的 -4px 是对应 inline-block 元素字体为 16px 时的数字,当字体为 18px ,14px或其他是需要对应调整这个 -4px 。

<style type="text/css">  
ul {  
  font-size:0;
  letter-spacing:-4px;
}
li {  
  display:inline-block;
  text-align:center;
  letter-spacing:normal;
  font-size:16px;
}

a {  
  text-decoration:none;
  display:block;
  width:80px;
  padding:10px;
  background-color:#eee;
}
</style>

空白间隙消失

扩展阅读

兼容性解决

<style type="text/css">  
ul {  
  font-size:0;            /*所有浏览器*/
  letter-spacing:-4px;    /*safari浏览器*/
  *word-spacing:-1px;     /*shit IE 6、7*/
}
li {  
  display:inline-block;
  *display:inline;        /*shit IE 6、7*/
  *zoom:1;                /*shit IE 6、7*/
  font-size:14px;         /*所有浏览器*/
  letter-spacing:normal;  /*所有浏览器*/
  word-spacing:normal;    /*所有浏览器*/
}
</style>