先看一下Position属性:
定义和用法
position 属性规定元素的定位类型。
说明
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
浏览器支持所有主流浏览器都支持 position 属性。
注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。
可能的值
值
描述
absolute
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom"
属性进行规定。
fixed
生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom"
属性进行规定。
relative
生成相对定位的元素,相对于其正常位置进行定位。
因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
static
默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者
z-index 声明)。
inherit
规定应该从父元素继承 position 属性的值。
我们希望实现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就像向中间浮动一样居中了。
CSS代码如下:
#info_main{ width:620px;text-align:center;}
#info_main li{width:auto;border:1px solid #CCC;}
#info_main ul{margin:0;border:1px solid #CCC;height:30px;}
#info_main ul{float:left;position:relative;left:50%;}
#info_main ul
li{position:relative;right:50%;float:left;margin:2px;padding:0
2px;line-height:120%;}
网页代码如下:
- 时间:{dede:field name='pubdate'
function='strftime("%Y-%m-%d %H:%M","@me")'
/}
- 来源:{dede:field.source/}
- 作者:{dede:field.writer/}
- 点击:次
显示效果如下: