UL完美居中的方法［转］

阅读更多

让UL完美居中

ul及li标签我们在写前端html页面的时候总是会用到，有时候我们需要一个横向菜单，不能定义宽度，里边的li还要自适应其中的文字内容（这是很苛刻的条件了），因为这时候的li有float:left属性，不好实现哦，这篇文章就是告诉大家如何做一个能自适应内容，不需要知道ul宽度，还能居中显示的菜单或者其它东西。

首先我们主要用的的是ul及li标签

        

                .......
        

和平时写的没什么差别，仔细看样式

ul{ position:relative; left:50%; float:left;}   

     //左浮动，定位对齐到容器中间，这时候的菜单是偏右的；

ul li{ position:relative:right:50%; float:left;}   

     //左浮动，让li浮动到一行，让li右侧相对ul偏移50%；

ul li{ padding:4px 12px;}     

   //给li弄些间距；


完成了通过两个50%的偏移完成了ul列表相对父容器偏移的效果；