li标签居中浮动的方法
昨天在公司干活的时候,遇到一个版面,版面导航需要链接居中浮动.思来想去,没找到很好的方法.
由于本人CSS功力尚浅,自己找不到方法,只好去search一番.
一般来说,导航的布局为
这里就需要将li标签居中浮动,但是一般浮动只有左右的属性
网上找到的结果是:
利用相对定位:position:relative来实现这一目标,它依据left,right,top,bottom等属性在正常文档流中偏移位置。(不了解的童鞋去谷歌下)
所以,要实现li的float:center,就需要设置UL上级容器position:relative; overflow:hidden;(溢出隐藏是必须的)
UL则是position:relative;left:50%;
LI恰恰相反position:relative;left:-50%;
这样,li标签就会居中浮动,不废话了,看看实例。
Read more »