有序+发布时间+字数限制的新闻列表

博客 - html/css/xml/xsl

有序+发布时间+字数限制的新闻列表

新闻列表示意图

接手新项目，要写一个如上图的东西，简单做个说明：外层盒子固定宽度，文章标题字数超出即隐藏，并实现省略号(支持的浏览器)，日期位置跟随标题宽度。

难度不大，关键要了解各浏览器的特性。这个东西难点就在于时间元素上，我利用float+负margin来解决，兼容性也好，遗憾的是hack没少用，实属无奈啊！-_-!

下面贴出代码：

<div id="demo">
<ol class="clearfix">
 <li><a href="#@">方大同5月8日广州开唱不秀粤语最想和蔡琴合作</a>2008-03-14</li>
 <li><a href="#@">麻城杜鹃开的艳　奶茶歌声唱的亮</a>2008-03-14</li>
 <li><a href="#@">5月2日变形金刚助阵五月天</a>2008-03-14</li>
 <li><a href="#@">方大同5月8日广州开唱</a>2008-03-14</li>
 <li><a href="#@">刘若英上海个唱即将开演设计独特处处有看点</a>2008-03-14</li>
 <li><a href="#@">五月天玛莎低调避庆生</a>2008-03-14</li>
 <li><a href="#@">4月24日五月天厦门演唱会凛凛寒风激情不</a>2008-03-14</li>
 <li><a href="#@">任贤齐群星NOW翻成都小齐家族两次登台</a>2008-03-14</li>
 <li><a href="#@">周华健与群星NOW翻成都</a>2008-03-14</li>
 <li><a href="#@">刘若英《在一起》发片首周成绩亮眼</a>2008-03-14</li>
</ol>
</div>

#demo { font:12px/1.5 Arial;}
#demo ol { padding-left:23px; width:14em; background:url(num.gif) no-repeat 2px 6px;}
#demo li { clear:both; line-height:23px;}
#demo li a { float:left; _height:23px; _background:transparent; overflow:hidden; white-space:nowrap; _white-space:normal; max-width:14em; -o-text-overflow:ellipsis; text-overflow:ellipsis;}
#demo li span { float:left; _display:inline; _position:relative; width:70px; padding-left:10px; margin-right:-80px; font-size:11px; color:#999;}

css第4行， _background:transparent 解决IE6下“莫名”行高问题。

css第5行， _position:relative 解决IE6下该元素随外层宽度溢出隐藏。

css reset这里未提供，需自行添加。

用到图片一张：num.gif 打开后右键另存为！