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的自行設置寬度是無效的。