|
|
需求说明：
时间日期紧跟标题其后，距离标题 10px。当标题过长时，超长部分截断，但是时间必须显示完整。
合理的结构方便程序输出。
纯 CSS 布局，兼容主流浏览器平台。
解题说明：
这道题有多种解法，能解决问题就好。
为增加解题难度，本方案无 CSS Expression，避免可能存在的资源大量消耗的情况。
为增加解题难度，本方案无定位操作，节省资源。（不过在 IE6 下需要相对定位来应付某个 bug。）
为增加解题难度，本方案实现了对超长标题进行省略号截断。（不过 IE6 和 FF3- 除外。这两个活宝，一个不支持 max-width，一个不支持省略号截断。）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www_**_org/TR/xhtml1 ... al.dtd">
<html xmlns="http://www_**_org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
/* <![CDATA[ */
* {margin:0;padding:0;}
ol,ul {list-style:none;}
a:link,a:visited {text-decoration:none;}
a:hover,a:focus,a:active {text-decoration:underline;}
.clearfix,.clear {display:inline-block;}
.clearfix,.clear {display:block;}
.clearfix:after,.clear:after {content:'';display:block;clear:both;height:0px;}
body {
font: 12px/1.5 Arial, Helvetica, sans-serif;
color: #666;
background: white;
}
#dv_demo {
margin: 0 auto;
margin-top: 20px;
width: 318px;
line-height: 20px;
border: 1px solid #fc9;
}
#dv_demo ol {
padding-left: 23px;
width: 14em;
background: url(http://www_cs**ic_net/demo/2009 ... bg.png) no-repeat 2px 4px;
}
#dv_demo li {
clear: both;
}
#dv_demo li a {
float: left;
_display: inline;
max-width: 14em;
white-space: nowrap;
_white-space: normal;
/*
超长就换行，第二行被裁掉 @ IE6
*/
_height: 20px;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
color: #333;
_background: transparent;
/*
解决莫名占据高度bug @ IE6
*/
}
#dv_demo li span {
_position: relative;
/*
应付父容器hasLayout裁切bug @ IE6
*/
float: left; _display: inline;
margin-right: -99px;
padding-left: 10px;
font-size: 10px;
color: #999;
}
/* ]]> */
</style>
</head>
<body>
<div id="dv_demo">
<ol class="clearfix">
<li><a href="http://www_cs**ic_net/">CSS教程大全</a><span>2008-03-14</span></li>
<li><a href="###">最昂贵内衣惊艳出炉</a><span>2008-03-14</span></li>
<li><a href="###">【组图】让人喷饭的日常用品大收罗</a><span>2008-03-14</span></li>
<li><a href="###">世界上头发最长的美女令人叹为止</a><span>2008-03-14</span></li>
<li><a href="###">世界八大最喜欢吃人的恐怖生物大全</a><span>2008-03-14</span></li>
<li><a href="###">体育比赛中让人惊奇的瞬间</a><span>2008-03-14</span></li>
<li><a href="###">独家新闻：虹虹顺利产下龙凤胎</a><span>2008-03-14</span></li>
<li><a href="http://www_cs**ic_net/">CSS练习题精选</a><span>2008-03-14</span></li>
<li><a href="###">“亚洲小姐”选美</a><span>2008-03-14</span></li>
<li><a href="http://www_cs**ic_net/">Web标准与前端开发面试题</a><span>2008-03-14</span></li>
</ol>
</div>
</body>
</html>
要使IE7，8的max-width起作用;必须申明<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www_**_org/TR/xhtml1 ... al.dtd">
前一篇转载的《迅雷 2009 页面重构工程师面试题》作者的解法很好，我在他的基础上改了一下，减少了一些CSS代码，发现还是能达到题目的要求的。
<html xmlns="http://www_**_org/1999/xhtml">
<head>
<title>迅雷面试题</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
ul {list-style-type:none;width:200px;line-height:20px;}
a {max-width:14em;float:left;clear:both;white-space:nowrap;_white-space:normal;_height:18px;overflow:hidden;}
span {margin-right:-120px;_position:relative;padding-left:10px;float:left;}
</style>
</head>
<body>
<ul>
<li><a href="#">链接链接链接链接链接链接链接链接链接链接链接链接链接链接</a><span>2009-03-14</span></li>
<li><a href="#">链接链接链接</a><span>2009-03-14</span></li>
<li><a href="#">链接链接</a><span>2009-03-14</span></li>
<li><a href="#">链接链</a><span>2009-03-14</span></li>
</ul>
</body>
</html>
在IE6，7，8 firefox3.5和谷歌Chrome下测试的效果完全一样。
另外，我没有做省略号的效果，因为不是所有浏览器都能支持这个效果的。
在强调一下，火狐和IE7以上版本支持max-width，而IE6不支持，所以给ul设置width:200px;再使用_white-space:normal;使长句折行，再用_height:18px;控制高度，用overflow:hidden;隐藏溢出内容。还有一个就是，_position:relative;也是为了修复ＩＥ７以下版本的Bug，在ＩＥ７以下版本，如果＜ａ＞标签和＜ｓｐａｎ＞标签的长度相加超过了CSS对<a>标签限制的长度，也会把超出的<span>隐藏掉。
注：要使IE7，8的max-width起作用;必须申明<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www_**_org/TR/xhtml1 ... al.dtd">如果不申明，则跟IE6一样的处理方法。本文出自 51CTO_COM技术博客 |
+10
|
/1 
发表于 2010-3-18 16:32
收藏