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

你可能感兴趣的:(UL完美居中的方法[转])