注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

左岸

web前端

 
 
 

日志

 
 

一个新闻列表  

2012-09-13 16:57:03|  分类: 实例 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

一个新闻列表,日期要紧随标题之后,标题太长时可以自动隐藏,但日期要显示完整。

因为日期是跟在标题后面的,所以这里要用内联标签,但这会在自动隐藏标题的时候出现问题。最后,想到了一种特殊的处理方法。外框的宽度比如说是300px,那么就把ul的宽度定为240px,然后通过绝对定位把日期从文档流中拖出,这时当标题达到ul的宽度的时候将之隐藏,而日期因为浮动而跟随其后,就达到所要的效果了。

<style type="text/css">
body {font:normal 12px "宋体",Verdana, Arial, Helvetica, sans-serif;}
ul {margin:0; padding:0;}
li {list-style-type:none;}
a {color:#333; text-decoration:none;}
a:hover {color:#900; text-decoration:none;}
div {width:300px;}
 div ul{display:block; width:240px;}
 div li {display:inline-block; *display:inline; zoom:1; position:relative;}
  div li a {display:block; *display:inline; zoom:1; height:22px; line-height:22px; overflow:hidden;}
  div li span {position:absolute; top:0; right:-60px; padding-left:10px; line-height:22px; color:#999; }
</style>
<ul>
     <li><a href="#">日本政府网站被黑 出现五星红旗</a><span>2009-4-13</span></li>
        <li><a href="#">日本政府网站被黑 </a><span>2009-4-13</span></li>
        <li><a href="#">日本政府网站被黑 出现五星红旗 出现五星红旗</a><span>2009-4-13</span></li>
        <li><a href="#">日本政府网站被黑 出现五星红旗</a><span>2009-4-13</span></li>
        <li><a href="#">日本政府网站被黑 </a><span>2009-4-13</span></li>
        <li><a href="#">日本政府网站被黑 出现五星红旗 日本政府网站被黑</a><span>2009-4-13</span></li>
        <li><a href="#">日本政府网站被黑 出现五星红旗</a><span>2009-4-13</span></li>
        <li><a href="#">日本政府网站被黑 </a><span>2009-4-13</span></li>
        <li><a href="#">日本政府网站被黑 出现五星红旗 日本政府网站被黑</a><span>2009-4-13</span></li>
        <li><a href="#">日本政府网站被黑 出现五星红旗</a><span>2009-4-13</span></li>
  </ul>

 

 

  评论这张
 
阅读(44)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017