UL完美居中的方法[转]
程序员文章站
2022-07-09 09:27:12
...
让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列表相对父容器偏移的效果;
上一篇: js 设置div 页面居中
下一篇: 全文检索Lucene(一)---快速入门