05 Mar 2007, 03:16 UTC

用XHTML+CSS实现文章列表标题时间对齐

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

pconline_list.gif

无意间发现文章列表的页面代码写得很奇怪,首先他们用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的?

comments powered by Disqus