一道看似简单的面试题

曾经做过一么一题面试题，大体上的要求是这样的：一个新闻列表，日期要紧随标题之后，标题太长时可以自动隐藏，但日期要显示完整。

就这么个题目，看起来似乎很简单，但做起来似乎就没那么简单了。因为这里要求是时间紧随标题之后，如果是时间右对齐的话，相信大多数人片刻就能搞定。有兴趣的朋友不妨先不看下面的源码，自己做做试试。

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

PS：原来没有考虑到opera的兼容，现已修正，不过用了hack，暂时没想到好方法了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>demo</title> <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> </head> <body> <div> <ul> <li><a href="#">日本政府网站被黑出现五星红旗</a>2009-4-13</li> <li><a href="#">日本政府网站被黑 </a>2009-4-13</li> <li><a href="#">日本政府网站被黑出现五星红旗出现五星红旗</a>2009-4-13</li> <li><a href="#">日本政府网站被黑出现五星红旗</a>2009-4-13</li> <li><a href="#">日本政府网站被黑 </a>2009-4-13</li> <li><a href="#">日本政府网站被黑出现五星红旗日本政府网站被黑</a>2009-4-13</li> <li><a href="#">日本政府网站被黑出现五星红旗</a>2009-4-13</li> <li><a href="#">日本政府网站被黑 </a>2009-4-13</li> <li><a href="#">日本政府网站被黑出现五星红旗日本政府网站被黑</a>2009-4-13</li> <li><a href="#">日本政府网站被黑出现五星红旗</a>2009-4-13</li> </ul> </div> </body> </html>

提示：你可以先修改部分代码再运行。

Moondy 发表于 2009-6-1 3,985 Views | 类别: Xhtml/Css

15条留言立即发表评论

#1tank @ 2009-6-10 09:58 回复

非常不错，我是新手！基本上看明白了！！你的BLOG不错，RSS先！
#2Moondy @ 2009-6-10 11:20 回复

@tank
哈哈，欢迎常来！
#3lt @ 2009-6-16 11:37 回复

你都不用兼容opera的吗？
那当然好做了。
- Moondy @ 2009-6-16 17:00 回复
  
  多谢这位仁兄的提醒，当初还真是没有考虑到opera的兼容。现已修正了，全都兼容，不过用到了些hack，总感觉不太完美。
#4unicac @ 2009-7-1 19:23 回复

看来迅雷这道题出得还是不错滴！
- Moondy @ 2009-7-1 19:50 回复
  
  哈哈，被你看出来啦。其实面试题我全都通过了的！
#5bearjia @ 2010-1-15 15:30 回复

新闻列表

html, body{ width:100%; height:100%; margin:0; padding:0; font-size:12px;}
div, ul, li{ margin:0; padding:0; list-style:none;}
.list_news{ width:400px; height:600px; float:left;}
.list_news ul{ width:400px; height:auto;}
.list_news li{ width:400px; height:22px; overflow:hidden; line-height:22px;}
a{ color:#000000; text-decoration:none; display:block; float:left;}
.d1{ color:#999999; font-family:Arial, Helvetica, sans-serif; font-size:11px; margin-left:5px; display:inherit;}

么个题目，看起来似乎很简单，但做起那么 2009-10-11
么个题简单，但做起来似乎就没那么 2009-10-11
么个题目，看起来似乎很简单，但做起来似乎就没那么 2009-10-11
么个题目，看起来似乎很简单，但那么 2009-10-11
么个题目，看起来似乎很简来似乎就没那么 2009-10-11
么个题目，看起来似乎很简单，但做起来似乎就没那么 2009-10-11
么个题目，单，但做起来似乎就没那么 2009-10-11
么个题目，看起来似乎很简单，但做起似乎就没那么 2009-10-11
么个题目，看起来似乎就没那么 2009-10-11
么个题目，看起来似乎很简单，但做就没那么 2009-10-11
- Moondy @ 2010-1-17 01:59 回复
  
  这位朋友可能没有理解到题目的意思。
  楼上的这种做法，当文字超出长度的时候，时间也会被hidden，而需求是文字超出时，文字隐藏而日期正常显示。
#6罐子 @ 2010-5-7 11:48 回复

哈哈.用绝对定位
我第一反应是用max-width.想办法让ie6兼容就ok了.
- 罐子 @ 2010-5-7 15:06 回复
  
  = =刚试了一把..ie6用_width:expression_r(this.scrollWidth > 220 ? 220 + ‘px’ : ‘auto’); 但不支持overflow:hidden; 饿..看来也就你这方法能实现了.我那方法就ie6不支持
#7Rong @ 2010-12-10 12:36 回复

body {font: Arial, Helvetica, sans-serif,”宋体”}
ul,li {list-style:none; margin:0; padding:0}
ul {width:300px; padding:5px; border:1px #EEE solid}
li {line-height:25px;list-style:none; height:25px; width:220px; overflow:hidden; padding-right:80px}
a {display:inline-block; margin-right:10px}
span {position:absolute}

确实花了比较长的时间，由于系统是Windows 7，所以设了下字体，无伤大雅。

基本上满足了性要求。
- Rong @ 2010-12-10 12:47 回复
  
  body {font: Arial, Helvetica, sans-serif,”宋体”}
  ul,li {list-style:none; margin:0; padding:0; list-style:none}
  ul {width:300px; padding:5px; border:1px #EEE solid}
  li {width:220px;line-height:25px;height:25px;overflow:hidden}
  a {display:inline-block; margin-right:5px}
  span {position:absolute}
  - Rong @ 2010-12-10 12:50 回复
    
    系统只有火狐、ie8、测试通过。
#8红色曼陀罗 @ 2011-6-1 09:06 回复

我想问下楼主，假如有隐藏的部分加三个下黑点，然后鼠标滑过时可以用另外一个层显示标题全部内容怎么实现？
这个问题困扰我很长时间了
- moondy @ 2011-6-5 13:57 回复
  
  其实也不难，你用em做为宽度单位，然后用js判断超出规定em宽度的加上省略号。显示全标题就用title属性就OK了。