效果图如下：

list1.jpg

也许你会认为这个是很简单的，呵呵那是因为一般写这个列表的时候用的都是时间写在前面，标题写在后面，那样对于显示来说是先有时间后有标题的，对搜索引擎不是很友好。 老方法大概是这样的： html代码：

<li><span>2010-07-30</span><a href="#">css基础-基本知识点梳理</a></li>

这个大家应该都会，就是把span的float设置为right。 现在我们考虑另一种方案，把标题放在前面，时间放在后面看看 html代码：

<ul><li><a href="#">css基础-基本知识点梳理</a>2010-07-30</li><li><a href="#">css混排-左右交替2</a>2010-07-29</li><li><a href="#">css优先级详解</a>2010-07-29</li><li><a href="#">用css制作鼠标经过提示效果</a>2010-07-22</li><li><a href="#">css图片替换文字技巧系列1-内联元素</a>2010-07-08</li><li><a href="#">CSS列表系列1-炫酷列表</a>2010-07-05</li>
</ul>

css代码如下：

ul{
background:#ededed;
width:410px;
margin-left:20px;
padding:10px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
li{
padding:5px;
text-align:right;
width:400px;
list-style:none;
color:#F33;
font-size:12px;
border-bottom:1px solid #ccc;
border-top:1px solid #efefef;
}
a{
margin-right:10px;
float:left;
text-decoration:none;
font-size:13px;
color:#999;
}

关键是设置li的对齐方式为右对齐，即text-align:right;然后再设置a的浮动为左，即float:left;这就是解决问题的思路。其余的css为修饰之用。 简单方便且符合先重后次顺序还利于搜索引擎。