CSS, 网站设计, 随笔

用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>

效果见这里

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

  • http://www.junchenwu.com JunChen

    float 之后不用再写 display: block;

    float 的对象自动被视为 block-level

    :)

  • 94smart

    多谢,确实定义重了,应该不太影响效果。

  • Pingback: 鬼仔’s Blog » links for 2007-03-06()