UL完美居中的方法

让UL完美居中



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

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

<ul>
        <li>
                .......
        </li>
</ul>


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

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列表相对父容器偏移的效果;

你可能感兴趣的:(UI,居中,li)