CSS篇之水平导航

李义发布于2019-08-29 11:19 / 1101人阅读

摘要：关于水平导航已然是老生常谈之问题，看了网上诸多方法，今天小小的总结对比了一下现有方法的优缺点。问题一个最简单的结构如下，请实现水平导航。缺点，和方法一样，会出现空白间隙，解决方案如上，因为是行内元素，所以不能设置宽高，比较局限。

关于水平导航已然是老生常谈之问题，看了网上诸多方法，今天小小的总结对比了一下现有方法的优缺点。

问题：一个最简单的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就苦逼了，并不能。

结语：暂时就这么多。

混合云服务器托管 css导航条导航栏css代码 div+css导航菜单水平

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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