css布局列表上显示标题及时间

我们会在网页上看到一些栏目列表上左边显示内容标题右边显示时间同一行上，看上去简单的布局对于新手来说也是需要花时间去调整至少小编我就是这样，今天添加了一些栏目也写了类似这样的样式怕以后忘记还是记录了下来，代码如下：
html代码
[code]<ul>
<li><span class=”contents”>这里是内容标题</span><span class=”time”>2012-1-1</span></li>
<li><span class=”contents”>这里是内容标题2</span><span class=”time”>2012-1-2</span></li>
</ul>[/code]

css代码
[code]li span.contents
{
float:left;
width:250px;/* 宽度需要调整 */
height:15px;
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(…) ；需与overflow:hidden;一起使用。*/
}

li span.time{
color: #000;
height:15px;
float:right;
}[/code]

效果如图：

[code].home_news_list{
float:right;
width:380px;
margin-right:23px;
margin-top:33px;
}

.home_news_list li{
height:27px;
line-height:27px;
}

.home_news_list li:hover{
background:#486a00;
}

.home_news_list li span.contents{
width:300px;
display:block;
float:left;
text-indent:7px;
overflow:hidden;
}

.home_news_list li span.contents a{
color:#fcf696;
}

.home_news_list li span.time{
text-align:right;
}[/code]