今天要查LCD的资料，跑到PConline去看，看到他们的文章列表觉得效果还好，如图：

无意间发现文章列表的页面代码写得很奇怪，首先他们用ul做文章列表这没错，接着又用另一个ul来放时间，之后用一个table把两部分拼起来，做成列表标题和时间都对齐的效果，如下（稍微调整了一下）：

<table width="97%" cellspacing="5" cellpadding="0" border="0" align="center"> <tr> <td width="85%"><ul> <li>· <a href="javascript:;">[北京]暴跌千元!32寸HDMI接口液晶电视仅3999</a> </li> <li>· <a href="javascript:;">[北京]封杀国产!飞利浦42寸液晶迅猛跌破9000</a> </li> <li>· <a href="javascript:;">[广州]再降1000 三星40寸LA40F71B售价21999元</a> </li> <li>· <a href="javascript:;">[北京]国产已成往事!LG高端IPS屏液晶跌破8000</a> </li> <li>· <a href="javascript:;">[北京]世界顶级面板!三星40寸液晶电视欲破万</a> </li> <li>· <a href="javascript:;">[北京]LG低价埋葬国产!42英寸可录像液晶疯降</a> </li> </ul></td> <td width="15%"><ul> <li>[ 02-28 ]</li> <li>[ 02-27 ]</li> <li>[ 02-27 ]</li> <li>[ 02-26 ]</li> <li>[ 02-26 ]</li> <li>[ 02-12 ]</li> </ul></td> </tr> </table>

可以看出废码那是相当的多，而且语义很混乱，其实一个ul就够了，配合CSS做出对齐效果很简单，以下是我给出的代码：

<style type="text/css"> .list{ width:398px; font-size:12px; float:left; } .list ul{ display:block; margin:0px; padding:0px; width:100%; float:left; } .list ul li{ text-align:left; display:block; width:100%; margin:2px 0px; padding:0px; list-style-position:inside; float:left; } .list ul li a{ float:left; display:block; } .list ul li span{ font-size:12px; display:block; float:right; } </style>

<div class="list"> <ul> <li><a href="javascript:;">[北京]暴跌千元!32寸HDMI接口液晶电视仅3999</a> <span>[ 02-28 ]</span></li> <li><a href="javascript:;">[北京]封杀国产!飞利浦42寸液晶迅猛跌破9000</a> <span>[ 02-27 ]</span></li> <li><a href="javascript:;">[广州]再降1000 三星40寸LA40F71B售价21999元</a> <span>[ 02-27 ]</span></li> <li><a href="javascript:;">[北京]国产已成往事!LG高端IPS屏液晶跌破8000</a> <span>[ 02-26 ]</span></li> <li><a href="javascript:;">[北京]世界顶级面板!三星40寸液晶电视欲破万</a> <span>[ 02-26 ]</span></li> <li><a href="javascript:;">[北京]LG低价埋葬国产!42英寸可录像液晶疯降</a> <span>[ 02-12 ]</span></li> </ul> </div>

[效果见这里](http://blog.94smart.com/html/list_date.html)

上面代码的div是用来从外层控制列表样式的，可以用其他块级元素替换，li里面的span用来放时间，也可以使用div等元素替换，另外其他所需的样式（如标题前的点）都可以用CSS定义，灵活度上升不少，不知道这样实现算不算是Unobtrusive的？