经常泡在蓝色论坛里,昨天看到有人发的一个帖子 是关于他去讯雷面试遇到的题目.
 
先来看看题目
 
这个题目的难点是第一个要求,
 
看了论坛发贴人的解决办法如下,他使用了许多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=gb2312" />
<title>Demo</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="owner" content="" />
<meta name="robots" content="index, follow" />
<meta name="googlebot" content="index, follow" />
<style type="text/css">
<!--
body {background:#fff;text-align:center;margin:0 auto;padding:0;font:12px Verdana,"宋体";color:#000;}
div,form,img,li,dl,dt,dd {margin:0;padding:0; border:0;}
h1,h2,h3,h4,h5,h6 {margin:0;padding:0;}
table,td,tr,th{font-size:12px;}
ul,ol {margin:0 auto;padding:0;list-style:none}
a{color:#000;text-decoration:none;}
a:hover{color:#bd0a01;text-decoration:underline;}
/* Demo1 */
.demo1 {background:url( http://www.yunsd.cn/Images/Demo1.gif) no-repeat 0 4px;text-align:left;width:300px;padding:0 80px 0 20px;}
.demo1 li {display:-moz-inline-stack;display:inline-block;zoom:1;*display:inline;position:relative;}
.demo1 li a {display:block;zoom:1;*display:inline;height:20px;line-height:20px;overflow:hidden;}
.demo1 li span {position:absolute;top:0;right:-80px;width:70px;font-size:10px;height:20px;line-height:20px;color:#777;}
-->
</style>
</head>
<body>
  <!-- Demo1 -->
  <ul class="demo1">
   <li><a href="#">×××：中国经济持续下滑趋势到初步遏制</a><span>2009-4-24</span></li>
   <li><a href="#">浙江永康查办国土腐败窝案 涉案金额2000多万</a><span>2009-4-24</span></li>
   <li><a href="#">一季度农村居金收入实际增长8.6%</a><span>2009-4-24</span></li>
   <li><a href="#">内蒙古赤峰原市长徐国贿2000余万元</a><span>2009-4-24</span></li>
   <li><a href="#">美国高调冻结“东突”资外交信号</a><span>2009-4-24</span></li>
   <li><a href="#">业内人士不认同社科暖预测业内人士不认同社科暖预测业内人士不认同社科暖预测</a><span>2009-4-24</span></li>
   <li><a href="#">美国高调冻结“东突”资产 释放积极外交信号</a><span>2009-4-24</span></li>
   <li><a href="#">业内人士不认同社科院年回暖预测</a><span>2009-4-24</span></li>
   <li><a href="#">美国高调冻结“东产 释放积极外交信号</a><span>2009-4-24</span></li>
   <li><a href="#">业市下半年回暖预测</a><span>2009-4-24</span></li>
  </ul>
  <!-- End -->
</body>
</html>
 
 
我感觉比较复杂.
 
所以我自己把最难点写了出来,耗费了好几个小时的时间
 
<!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>无标题文档</title>
<style>
ul{list-style:none;}
#t1{float:left;overflow:hidden;height:24px; font-size:12px;}
ul li{overflow:hidden;line-height:24px;width:200px;}
.date{padding-left:10px; font-size:12px; color:#ccc;line-height:24px; position:absolute;}
</style>
</head>
<body>
<ul>
<li><div id="t1"><a href="#">世界上头发最长的美女</a></div><span class="date">2009-06-16</span></li>
<li><div id="t1"><a href="#">世界上头美女</a></div><span class="date">2009-06-16</span></li>
<li><div id="t1"><a href="#">世界上头发最长的世界上头发最长的美世界上头发最长的美世界上头发最长的美世界上头发最长的美世界上头发最长的美美女</a></div><span class="date">2009-06-16</span></li>
<li><div id="t1"><a href="#">世界上头发最长的美女</a></div><span class="date">2009-06-16</span></li>
<li><div id="t1"><a href="#">世界上头发最长的美女</a></div><span class="date">2009-06-16</span></li>
<li><div id="t1"><a href="#">世界上头发最长的美女</a></div><span class="date">2009-06-16</span></li>
<li><div id="t1"><a href="#">世界上头美女</a></div><span class="date">2009-06-16</span></li>
<li><div id="t1"><a href="#">世界上头发最长的世界上头发最长的美世界上头发最长的美世界上头发最长的美世界上头发最长的美世界上头发最长的美美女</a></div><span class="date">2009-06-16</span></li>
<li><div id="t1"><a href="#">世界上头发最长的美女</a></div><span class="date">2009-06-16</span></li>
<li><div id="t1"><a href="#">世界上头发最长的美女</a></div><span class="date">2009-06-16</span></li>
</ul>
</body>
</html>
 
 
欢迎大家拍砖