导航类“不定宽水平居中”的几种思路
定宽居中我们见的很多,可以用width、text-align、margin等来实现,但是如果没有宽度呢?
下面提供几种思路供大家参考,给出基本的html结构和思路,当然了,也不一定是这样的结构,道理搞懂了相信大家能够灵活变通。另外,里面的项是有固定宽和高的。
<header>
<nav>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</nav>
</header>
方法一:绝对、相对定位或者translateX
nav{position:absolute;left:50%;}
nav ul{position:relative;left:-50%;overflow:hidden;}
nav ul li{width:150px;height: 300px;float: left;background: #0F0;}
header默认宽度100%,把nav绝对定位,left:50%;然后里面的ul进行相对定位,left:-50%;在这点上绝对定位是办不到的,因为它把布局破坏掉了,容器宽度没有的情况下,它就面目全非,也无从谈起left:-50%。可能有人说,margin-left:-50%:也是可以的吧,这个在现有条件下是不行滴,它需要父容器宽度固定。那还有其他的么,当然,使用translateX(-50%)同样可以达到效果,因为它也不需要父容器的宽度。
这种方法有一点需要注意,因为你定的外层容器left:50%;如果你加了很多项进去,或者每一项的宽度过宽,导致那个“隐形”的容器(nav)右侧超过了浏览器的宽度,溢出了的话,里面的内容是会被挤下去的,这个时候,就违背初衷了,使用的时候要小心哦!~
方法二:使用Flexbox来实现
如果有过一定了解的人会知道,这个方法实现起来so easy,只不过需要浏览器支持它罢了,使用此法,则不需要定位了。
css如下
ul{
display: -webkit-flex;
-webkit-flex-direction: row;
-webkit-justify-content: center;
}
此法可以说是干净利落不留痕呐,just低版本IE不兼容~此处仅加了webkit前缀,不了解的童鞋且勿直接照搬使用哦。
更多flexbox相关可参考http://www.w3cplus.com/blog/tags/157.html
方法三:js获取项目数设置宽度
这种方法可以说是有点笨,只是绕了个弯子,仍然使用的是常规固定宽度水平居中的方法,通过js获取li,得到一个数组,然后数组长度乘以单项宽度,得到应有的总宽度,把总宽度值赋给外层ul即可,虽然此法略显笨拙,但如果在你不了解其他方法的情况下,不失为一种可行方案。
方法四:传说中的float:center
nav{
text-align:center;
overflow:hidden;
}
nav ul{
position:relative;
left:50%;
float:left;
}
nav ul li{
float:left;
width:150px;
height: 300px;
position:relative;
right:50%;
}
这种方法是一位前辈介绍的“古老”的方法,简单说来,是用了两次相对定位,ul相对定位,left:50%;li相对定位,right:50%或left:-50%也可。用我的话概括一下就是:整体右移,逐项左移。咦?这听起来似乎跟第一种方法有异曲同工之处。呵呵。就是这样的,本人能力有限,更深刻的道理也讲不出来。如果有其他玄机,还请高手不吝赐教。
方法五:
nav ul li{
display:inline-block;
}
nav ul{
text-align:center;
}
把其中的每一项设置成为行内块元素,然后用文本居中的方式使其居中,这种方法可以说是手起刀落,也没有什么难懂的原理在里面。
到最后了,说说我是怎么想起谈这个话题的吧,是一个企鹅的前辈考我的,当时,我本来是可以想到第二、三种方法,但顾及到浏览器兼容性和“笨”方法的缘故,我用了第一种方法,可惜还紧张没写对~所以,一直在寻求更多解决方案,以上是目前为止所知的几种。当然,只是提供了思路,可能有瑕疵还有细节没有说到,大家自己研究一下吧。会收获更多。欢迎交流!~
建议继续学习:
- 120个优秀的水平导航设计 (阅读:73808)
- 网站导航设计的6大分类 (阅读:7837)
- 我们来做一个会呼吸的菜单吧!! (阅读:3244)
- 递归并不一定非得是“自己调用自己的function” (阅读:3167)
- 实现一个更精简的Tab (阅读:2393)
- 终极攻略――未知高度元素垂直居中 (阅读:2277)
- 关于网站地图 (阅读:2383)
- 用面包屑来简化多层的tabs (阅读:2349)
- 网站导航设计模式指南 (阅读:2325)
- 给网站布置一个明晰的“关于”页面 (阅读:2181)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:灵感_idea 来源: 灵感_idea
- 标签: 导航 居中
- 发布时间:2016-02-13 23:05:39
- [66] Go Reflect 性能
- [65] Oracle MTS模式下 进程地址与会话信
- [64] 如何拿下简短的域名
- [59] android 开发入门
- [59] IOS安全–浅谈关于IOS加固的几种方法
- [58] 图书馆的世界纪录
- [58] 【社会化设计】自我(self)部分――欢迎区
- [53] 视觉调整-设计师 vs. 逻辑
- [47] 界面设计速成
- [46] 读书笔记-壹百度:百度十年千倍的29条法则