css之display:inline-block与float区别（能够尝试用一下）

HTML的元素有多种display属性，比较常见的有display:none; display:block; display:inline和display:inline-block;等。详细可参阅W3Schools文档。

有些HTML元素天然地带有display:block;样式属性，好比
    <div>
    <h1>...<h6>
    <p>
    <ul>,<ol>,<dl>
    <li>,<dt>,<dd>
    <table>
    <pre>
等元素，其显示为block样式，会将一行中其可用的空间给跨越占据，容不下另外一个元素与其同行。

有些HTML元素则是天然带有display:inline;样式属性，这也是元素默认的样式，好比
    <span>
    <a>
    <strong>
    <em>
    <img>
    <br>
等元素，其不会打断文档排布流，会在一行中一个挨一个地排列。

当想要作一个水平的列表时，一种方式是使用float来实现，但得容忍其缺点；另外一种方式是使用display:inline-block;来实现。如今转入正题了。

用float方式会带来的麻烦：
使用float方式须要注意的是，要有一个元素来包裹float元素，同时避免接下来的元素牢牢地靠近它。另一个麻烦是，当有一个多行水平列表，可是列表里的内容有不一样的高度时，就会排的很是痛苦。

用display:inline-block;方式：
display:inline-block;方式样式化列表时，既可以使得列表元素能按行挨个排列，同时元素还能保持其块属性，好比高和宽、上下边距等。可是对有不一样高度内容的元素时，一般要设置对齐方式如vertical-align: top;来使元素顶部对齐。

用display:inline-block;的浏览器兼容：
CSS中使用display:inline-block;来样式化，在Firefox, Safari, Google Chrome 和 IE 8及以上是有效的。可是在早期的IE，好比IE 7，就要作一些改变才能适应。
    /* For IE 7 */
    zoom: 1;
    *display: inline;
一般，作浏览器兼容适应的CSS样式化，最好是分开独立的样式文件，而后经过条件注释将其引入。

用display:inline-block;的空白符引发的问题：
由于元素之间是行内inline修饰排列的，所以HTML中的空格符也会影响到这个修饰。也就是说，当咱们把元素的大小和顺序排列好后，若是在<li>元素之间有空格符，这个空格符将会产生4px的边距。

综述

一、用display:inline-block;来实现水平列表比用float方式更容易控制，须要注意的是前者会由空格符带来边距影响。

二、inline-block默认是底部对齐的，要让两个元素顶部对齐，须要加上一句：veritcal-align:top; 
三、inline-block 的宽度能够自行设置的，而inline的自行设置宽度是无效的。