关于inline-block的应用

    display:inline-block;顾名思义是结合了inline和block的特性。就是将对象呈现为inline对象（不换行），但是对象内容作为block对象呈现（可以设置宽高）。总结来说就是，在可以设置宽高的同时，使元素保持在一行中。

    例如我们在做导航栏时，以前的设置方法要通过 float:left 来控制<li>来实现，还要解决浮动带来的种种影响。而现在可以直接用 display:inline-block; 来解决，具体代码如下：

HTML:

 <ul>
                <li class="active"><a href="#">新闻</a></li>
                <li><a href="#">体育</a></li>
                <li><a href="#">汽车</a></li>
                <li><a href="#">房产</a></li>
                <li><a href="#">旅游</a></li>
                <li><a href="#">教育</a></li>
</ul>

CSS:

ul, li, a{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
a{
　  text-decoration:none;
    color:#333
}

li{
    diaplay:inline-block;
    font-size:16px;
    width:80px;
    text-align:center;
}

可以实现导航栏居中。

当然也可以直接用来进行三列布局操作，而且不需要注意float布局带来的困扰。

diaplay:inline-block; 唯一需要注意的就是出现空隙，这些所谓的空隙就是空白符，这也是inline的默认现象。

原因是：内联元素的默认垂直对齐方式是和基线对齐，并不是和底部对齐。即默认vertical-align属性值为baseline。

解决方法：1.在其父元素的css中，即上述代码的ul{}中，添加 font-size:0px; 即可解决。（这个相对比较简单，但对于文本多的没那么友好）；

2.改变vertical-align属性：根据需求可以改为middle、top、bottom、text-bottom等（推荐）