CSS篇之水平導(dǎo)航

李義發(fā)布于2019-08-29 11:19 / 1377人閱讀

摘要：關(guān)于水平導(dǎo)航已然是老生常談之問題，看了網(wǎng)上諸多方法，今天小小的總結(jié)對比了一下現(xiàn)有方法的優(yōu)缺點。問題一個最簡單的結(jié)構(gòu)如下，請實現(xiàn)水平導(dǎo)航。缺點，和方法一樣，會出現(xiàn)空白間隙，解決方案如上，因為是行內(nèi)元素，所以不能設(shè)置寬高，比較局限。

關(guān)于水平導(dǎo)航已然是老生常談之問題，看了網(wǎng)上諸多方法，今天小小的總結(jié)對比了一下現(xiàn)有方法的優(yōu)缺點。

問題：一個最簡單的html結(jié)構(gòu)如下，請實現(xiàn)水平導(dǎo)航。


    home
    web
    other

基礎(chǔ)樣式：

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;}

優(yōu)點：兼容性好，所有瀏覽器版本都能很好的支持；

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

方法二：display:inline-block

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

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

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

缺點：列表元素之間會很詭異的有間距，原因是因為標簽換行的空白帶來的影響，解決方案有兩種：1，在父元素設(shè)置font-size為0；2，讓列表的結(jié)束標簽與下一個列表的開始標簽連在一起，但是這樣HTML可讀性不好，所以一般采用第一種方法就能很好的解決。

方法三：display:inline

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

優(yōu)點：代碼簡潔。

缺點：1，和方法2一樣，會出現(xiàn)空白間隙，解決方案如上；2，因為是行內(nèi)元素，所以不能設(shè)置寬高，比較局限。

方法四：display:flex/inline-flex

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

優(yōu)點：代碼簡潔；無副作用影響

缺點：兼容性一般，ie9及以下不支持

在這里說下小小的區(qū)別：inline-flex父元素寬度為子元素寬度和；flex為塊級元素，默認寬度為父級寬度。當(dāng)然從名字上也能很容易看出，不過在網(wǎng)上看到inline-flex的文章并不那么多，所知甚微，還請大家補充。

方法五：display:table-cell

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

優(yōu)點：兼容性較好，IE8及以上都支持

缺點：暫未發(fā)現(xiàn)（btw:不加上對父元素設(shè)置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;
}

優(yōu)點：簡單粗暴

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

結(jié)語：暫時就這么多。