CSS篇之水平導航

李義發布于2019-08-29 11:19 / 1372人閱讀

摘要：關于水平導航已然是老生常談之問題，看了網上諸多方法，今天小小的總結對比了一下現有方法的優缺點。問題一個最簡單的結構如下，請實現水平導航。缺點，和方法一樣，會出現空白間隙，解決方案如上，因為是行內元素，所以不能設置寬高，比較局限。

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

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


    home
    web
    other

基礎樣式：

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就苦逼了，并不能。

結語：暫時就這么多。

GPU云服務器云服務器 css導航條導航欄css代碼 div+css導航菜單水平

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111568.html

CSS篇之巧用line-height

摘要：公司一個頁面中的一個樣式如下，使左邊文字豎直排列且水平垂直居中代碼已中止一般情況，我會用如上或者用使文字豎直排放看起來居中，但是這樣不夠智能或顯得比較冗余。公司一個頁面中的一個樣式如下，使左邊文字豎直排列且水平垂直居中：showImg(https://segmentfault.com/img/bVJKr7?w=737&h=180); 代碼：已中止 .left-tit{ wi...

dendoink 2019-08-30 15:53 評論0 收藏0
CSS篇之巧用line-height

摘要：公司一個頁面中的一個樣式如下，使左邊文字豎直排列且水平垂直居中代碼已中止一般情況，我會用如上或者用使文字豎直排放看起來居中，但是這樣不夠智能或顯得比較冗余。公司一個頁面中的一個樣式如下，使左邊文字豎直排列且水平垂直居中：showImg(https://segmentfault.com/img/bVJKr7?w=737&h=180); 代碼：已中止 .left-tit{ wi...

hsluoyz 2019-08-01 16:23 評論0 收藏0
Flutter是跨平臺開發終極之選嗎？Android開發該如何快速上手Flutter？

摘要：月日，谷歌正式發布了的。到底能不能成為跨平臺開發終極之選是基于前端誕生的，但是對前端開發來說，的環境配置很麻煩，需要原生的平臺知識，還要擔心遇上網絡問題。現在已經不是曾經的小眾框架，這兩年里它已經逐步成長為主流的跨平臺開發框架之一。 ...

luckyyulin 2021-09-07 09:59 評論0 收藏0
react-native 布局篇之flexbox

摘要：布局直接閱讀大神文章阮一峰寫的布局。有幾個注意的點，我在剛剛開始中總結的容器屬性，，布局方式主軸對齊方式交叉軸對齊方式這里需要特別注意的就是主軸和交叉軸。特別注意的作用對象是主軸在中設置是水平方向上占滿整個容器。 FlexBox布局直接閱讀大神文章：阮一峰寫的FlexBox布局。在react-native中原理是一樣的，只不過可能有寫屬性在react-native中簡化了。有幾個注意...

Near_Li 2019-08-20 18:11 評論0 收藏0
JQuery 干貨篇之選擇元素

摘要：干貨篇之選擇元素實驗的的代碼選擇器選擇正在處理動畫的元素選擇第一個元素選擇最后一個元素選擇第個元素從開始選擇序號為偶數的元素選擇序號為奇數的元素選擇序號大于的元素選擇序號小于的元素選擇所有的文本輸入框 JQuery 干貨篇之選擇元素實驗的HTML+CSS的代碼 html Example Jacquis Flower Shop ...

zorpan 2019-08-20 15:56 評論0 收藏0