CSS篇之水平導航

關於水平導航已然是老生常談之問題，看了網上諸多方法，今天小小的總結對比了一下現有方法的優缺點。

問題：一個最簡單的html結構以下，請實現水平導航。

<ul>
    <li>home</li>
    <li>web</li>
    <li>other</li>
</ul>

基礎樣式：

ul{list-style: none;}
li{width: 80px;height: 30px;background: #7fffd4;color: #fff;text-align: center;line-height: 30px;}
li:hover{background: lightsteelblue;}

方法一：float

ul{overflow: hidden;}
li{float: left;}

優勢：兼容性好，全部瀏覽器版本都能很好的支持；

缺點：需清除浮動避免帶來的影響

方法二：display:inline-block

ul{font-size: 0;}
li{display: inline-block;font-size: 14px;}

優勢：兼容性好，支持IE8及以上，且不用考慮浮動帶來的負面效果；若想支持IE7及如下也容 易，只需添加以下代碼：

li{*display: inline;*zoom: 1;}

缺點：列表元素之間會很詭異的有間距，緣由是由於標籤換行的空白帶來的影響，解決方案有兩種：1，在父元素設置font-size爲0；2，讓列表的結束標籤與下一個列表的開始標籤連在一塊兒，可是這樣HTML可讀性很差，因此通常採用第一種方法就能很好的解決。

方法三：display:inline

li{display: inline;padding: 7px 20px;}

優勢：代碼簡潔。

缺點：1，和方法2同樣，會出現空白間隙，解決方案如上；2，由於是行內元素，因此不能設置寬高，比較侷限。

方法四：display:flex/inline-flex

li{display: flex/inline-flex;} //圖簡單，就這樣寫啦。。

優勢：代碼簡潔；無反作用影響

缺點：兼容性通常，ie9及如下不支持

在這裏說下小小的區別：inline-flex父元素寬度爲子元素寬度和；flex爲塊級元素，默認寬度爲父級寬度。固然從名字上也能很容易看出，不過在網上看到inline-flex的文章並不那麼多，所知甚微，還請你們補充。

方法五：display:table-cell

ul{display: table;}
li{display: table-cell;}

優勢：兼容性較好，IE8及以上都支持

缺點：暫未發現（btw:不加上對父元素設置table好像也沒啥影響。加上父元素table，父元素寬度爲子元素總寬）

方法六：box-orient

ul{
    /* Firefox */
    display:-moz-box;
    -moz-box-orient:horizontal;
                
    /* Safari、Opera 以及 Chrome */
    display:-webkit-box;
    -webkit-box-orient:horizontal;
                
    /* W3C */
    display:box;
    box-orient:horizontal;
}

優勢：簡單粗暴

缺點：很方便，有木有，可是，畢竟css3屬性，目前尚未瀏覽器支持此屬性,firefox、safari、chrome、opera能夠經過私有屬性來達到效果，IE就苦逼了，並不能。

結語：暫時就這麼多。