`
Jabbar2011
  • 浏览: 163810 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

UL完美居中的方法[转]

    博客分类:
  • css
阅读更多
让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列表相对父容器偏移的效果;
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics