智欣悦
智欣悦

inline-block元素上浮无法对齐的解决办法

不得不说display:inline-block;是一个强大的css属性，它解决了很多float浮动布局的不足，让页面布局更随意、富有弹性。但这个改变了元素类型的属性也存在着很多容易让人忽视的小问题，如之前我有写过的《li标签间有空白是怎么回事? 消除li横排后空隙》，我们姑且称之为“bug”吧（实则不然），只有我们掌握了这些问题的解决办法，才能更加熟练的使用这一布局神器。

inline-block元素上浮无法对齐的解决办法_第1张图片

笔者这次遇到的一个问题场景是元素设置为display:inline-block;后，部分元素出现了上浮，无法与其他同行元素水平对齐。

部分代码如下：

 
  
     
   
  1.  class="wrap">
    2.  
   
  2.   class="a">iyaxi.com
 
   
  •   class="a">雅兮网
    •  
   
  •   class="a">iyaxi.com
    •  
   
  •   class="a">雅兮网
    •  
   
    •  
   
  
    css部分
     
  
     
  
       
   
    1.  type="text/css">
      2.  
   
    2.  *{
      3.  
   
    3. border: 0;
      4.  
   
    4. padding: 0;
      5.  
   
    5. margin: 0;
      6.  
   
    6.  }
      7.  
   
    7. body{
      8.  
   
    8. font-size: 14px;
      9.  
   
    9.  }
      10.  
   
    10.  .wrap{
      11.  
   
    11. width: 960px;
      12.  
   
    12. margin: 0 auto;
      13.  
   
    13. margin-top: 100px;
      14.  
   
    14.  }
      15.  
   
    15.  .a{
      16.  
   
    16. width: 100px;
      17.  
   
    17. height: 60px;
      18.  
   
    18. background-color: #0088ff;
      19.  
   
    19. color: #fff;
      20.  
   
    20. display: inline-block;
      21.  
   
    21.  *display: inline;
      22.  
   
    22.  *zoom:1;
      23.  
   
    23.  }
      24.  
   
    24.  
      25.  
  
     
  
    可以看到，我们制作的这个小demo，预期是将四个
    设置为块状行内元素，让他们水平对齐以达到如下图效果。
     
  
    inline-block元素上浮无法对齐的解决办法_第2张图片
     
  
    当四个块状元素内都写有文本的时候，实现了预期的效果；但当其中一个块状元素无内容填充时，出现了异常，该空白元素出现了上浮，导致整个页面变得参差不齐了，如下图，为什么会这样呢？
     
  
    inline-block元素上浮无法对齐的解决办法_第3张图片
     
  
    重点来了（敲黑板！！！）行内元素和替换元素（如