CSS技巧- div输出日期居右
首先，我们以分页标签为例。分页标签的一行分三个部分，首先是一个点（可能部分人不用），其次是文章标题链接，接着是日期。
以默认来说，代码如下:为方便起见，我只假设只有一行。
< div id=list >
< ul >
< li >·< a title=门窗框式散热器近日在北京出现 href="/news/3373826129.html" >门窗框式散热器近日在北京出现< /a>& nbsp;< SPAN>[2008.08.22]< /SPAN>< / li>
< /ul> < /div>
思路一，给三个元素分别加上宽度和浮动。控制到一行。
在li中，有三个元素，我上面已经用不同的颜色标示出来。但是，这三个元素其中有一个元素和另外两个元素不同级别，什么呢？就是那个点。怎么解决呢？在科讯标签中允许那个点的部分输入HTML代码，于是我输入：·。为了于日期的span区别，给日期加上样式，date。
OK，这样下来，这段代码就变成了
< li>< SPAN class=done>·< /SPAN>< a title=门的起源 href="/news/24667977.html">门的起源< /a>& nbsp;< SPAN class=date>[2008.08.22]< /SPAN>< /li>
OK，这样就是三个平级的元素了。样式如下：
#list{ width:600px;}
#list li{ width:600px; line-height:28px; overflow:hidden;}
#list .done{ float:left; width:20px;}
#list .date{ color:red; float:left; width:80px;}
#list li a { width:480px; float:left;}
测试结果：失败。日期跑到第二行开头。
思路二：在思路一的基础上，修改date的样式，让他*右浮动，并加上外填充负值。
HTML代码，同上。
CSS代码 .date{ color:red; float:right; width:80px; margin-top:-30px;}
测试结果：成功。
OK，本来测试成功就行了。但是我感觉代码有些累赘，既然日期可以使用靠右浮动来解决，前面的点和链接就没必要加浮动了嘛！
修改，HTML代码如下：
< div id=list>
< ul>
< li>· < a title=门窗框式散热器近日在北京出现 href="/news/3373826129.html">门窗框式散热器近日在北京出现< /a>& nbsp;< SPAN class=date>[2008.08.22]< /SPAN>< /li>< /ul>< /div>
CSS代码：
#list{ width:600px;}
#list li{ width:600px; line-height:28px; overflow:hidden;}
#list .date{ color:red; float:right; width:80px; margin-top:-30px;}
#list li a { width:480px;}
测试结果，成功！
- ·10/29css技巧批量保存div+css图片方法
- ·10/03css技巧-用纯CSS控制图片最大宽度