09-08
31

li  float: left 的时候局中对齐 宽度自适应

解决li根据内容多少实现宽度自适应

很久以来,我们在做网站的导航条的时候,一般每个导航的字数都是相等的,2个或者4个最常见,这样我们一

般是给li一个固定的宽度。可曾遇到在很多时候我们需要li的宽度不固定,最好是能根据文字的多少来自适应宽

度。

我们都知道float:left和float:right,但是否想过float:center呢?居中浮动。。。

我们希望实现li是浮动的,并且居中的(li个数不固定,ul宽度未知)。可以设置ul的text-align:center,再设置

li的display,可以实现居中,但这样不是我们的初衷,我们需要实现float:center。

这里我们得先重温一下position:relative,它将依据left,right,top,bottom等属性在正常文档流中偏移位

置。那 我们可以让ul为position:relative;left:50%,然后再让li像左浮动,在让它 position:relative;right:50%

(或者left:-50%),那么li就像向中间浮动一样居中了。废话不多说,先试试。
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]


文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
评论: 0 | 引用: 0
发表评论
昵 称:
密 码: 游客发言不需要密码.
验证码: 验证码
内 容:
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.
字数限制 1000 字 | UBB代码 开启 | [img]标签 关闭