技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> CSS/HTML --> 导航类“不定宽水平居中”的几种思路

导航类“不定宽水平居中”的几种思路

浏览:858次  出处信息


   定宽居中我们见的很多,可以用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;

   }

   把其中的每一项设置成为行内块元素,然后用文本居中的方式使其居中,这种方法可以说是手起刀落,也没有什么难懂的原理在里面。

   到最后了,说说我是怎么想起谈这个话题的吧,是一个企鹅的前辈考我的,当时,我本来是可以想到第二、三种方法,但顾及到浏览器兼容性和“笨”方法的缘故,我用了第一种方法,可惜还紧张没写对~所以,一直在寻求更多解决方案,以上是目前为止所知的几种。当然,只是提供了思路,可能有瑕疵还有细节没有说到,大家自己研究一下吧。会收获更多。欢迎交流!~


建议继续学习:

  1. 120个优秀的水平导航设计    (阅读:73834)
  2. 网站导航设计的6大分类    (阅读:7869)
  3. 我们来做一个会呼吸的菜单吧!!    (阅读:3261)
  4. 递归并不一定非得是“自己调用自己的function”    (阅读:3181)
  5. 实现一个更精简的Tab    (阅读:2408)
  6. 终极攻略――未知高度元素垂直居中    (阅读:2284)
  7. 关于网站地图    (阅读:2407)
  8. 用面包屑来简化多层的tabs    (阅读:2375)
  9. 网站导航设计模式指南    (阅读:2362)
  10. 给网站布置一个明晰的“关于”页面    (阅读:2197)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1