跨浏览器实现float:center,No CSS hacks
作者:macji 来源:麦鸡的博客 发布时间:2008-08-22 12:59:00
我们都知道float:left和float:right,但是否想过float:center呢?居中浮动。。。
<div id="macji">
<ul class="macji-skin">
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
</ul>
</div>
我们希望实现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就像向中间浮动一样居中了。废话不多说,先试试。
#macji{
position:relative;
width:100%;
height:80px;
background-color:#eee;
text-align:center;
overflow:hidden;
}
#macji .macji-skin{
float:left;
position:relative;
left:50%;
}
#macji .macji-skin li{
position:relative;
right:50%;
float:left;
margin:10px;
padding:0 10px;
border:solid 1px #000;
line-height:60px;
}
演示地址:float-center.htm
猜你喜欢
- 为了顺利的开发一个多语言的国际化J2EE程序,需要修改数据库字符集,我的做法如下:安装 MySq时选择字符集为UTF-8修改MySql安装目
- ASP由于是一种古老的语言,它的一些功能对UTF-8支持非常差。比如,你想生成一个UTF-8格式的文件,使用常用的 scrīpting.Fi
- 今天摸了半天摸出来的,虽然这里没啥人玩ASP,不过也是win7的问题,发发当备份问题1.An error occurre
- 别误会,IE是不支持CSS3高级选择器,包括最新的IE8(详见《CSS选择器的浏览器支持》),但是CSS选择器的确是很有用的,它可以大大的简
- 1. 相对与比较老的环境,建议使用第二个 set dbconnection=Server.CREATEOBJECT("ADODB.
- 如何利用Image Data Type从数据库中读取图片,并在主页中显示图形?然后,写如下代码:< % @&nbs
- 你是否发现,在浩如烟海的应用程序堆里,具有漂亮图标和清爽名字的 App 更容易被用户喜爱。作为开发者,面对这自己的作品,能否自问一句:“从图
- 很多时候,用户可能会因为承受不了某一产品中的细节设计而放弃使用该产品,这无疑是让设计人员感很沮丧的事情,因为除去这个细节的问题外,这个产品可
- 1. 排名函数与PARTITION BY --所有数据 SELECT * FROM dbo.student AS a INNER JOIN
- 今早打开 腾讯ISD的博客 ,看到一篇新的文章,《迷你屋视觉规范简介》,赶紧看了来学习。不过给我抓到问题咯,臭鱼不介意我在这说下吧:这套规范
- 首先说明一下SQL Server内存占用由哪几部分组成。SQL Server占用的内存主要由三部分组成:数据缓存(Data Buffer)、
- 1.JOIN和UNION区别 join 是两张表做交连后里面条件相同的部分记录产生一个记录集, union是产生的两个记录集(字段要一样的)
- 区别IE6与FF:background:orange;*background:blue;区别IE6与IE7:background:green
- Update 语句Update 语句用于修改表中的数据。语法:UPDATE 表名称 SET 列名称 = 新值 WHERE 列名称 = 某值P
- 在附加数据库后查看不了数据库关系图,也无法建立数据库关系图 我的解决方法如下: 1、设置兼容级别为90(2005为90)(2000为80)
- 一般做法都是用aspjpeg的组件,这里有份用法说明,看一下吧。aspjpeg是一款非常强大的图片处理组件,纯英文版本。不过早已经有免费版和
- 总经一下前段时间用于的jQuery方法:find及children。需要的朋友可以参考下。首先看看英文解释吧: children方法:fin
- 合理地扩大页面链接响应区域可以提高网页的易用性。同时还要兼顾到链接的交互一致性以及视觉上的平衡,就需要做一些特殊的处理。实例一:一张图配一个
- 【MySql常用命令】1:使用SHOW语句找出在服务器上当前存在什么数据库:mysql> SHOW DATABASES;2:创建一个数
- CSS3草案中定义了{opacity:来声明元素的透明度,这已经得到了大多数现代浏览器的支持,而IE则很早通过特定的私有属性filter来实