css控制列表的问题
0
悬赏园豆：5
[已解决问题]
解决于 2010-05-10 17:33
瑞星前端面试题：一个ul列表，拥有若干li，内容是新闻标题，标题右边10px位置紧跟发布时间，当标题过长需要控制标题width，需要兼容ie6，不能用max-width
最佳答案
0
测试一下是否可以？
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>新闻列表</title>
<link type="text/css" rel="stylesheet" href="common/common.css" />
<style type="text/css">
h4{font-size:14px;height:27px;line-height:27px;padding-left:10px;border-bottom:#ddd 1px solid;}
.news{width:310px;border:#ddd 1px solid;}
.news ul{padding:5px 10px;}
.news ul li{line-height:24px;height:24px;overflow:hidden; position:relative;width:200px;padding-right:60px;word-break:break-all;}
.news ul li a{float:left; margin-right:10px;}
.news ul li span{ position:absolute; }
</style>
</head>
<body>
<div class="news">
<h4>新闻列表</h4>
<ul>
<li><a href="#">新闻列表新闻列表新闻列列表新闻列表新闻列表新闻列列表新闻列表新闻列表新闻列列表 </a><span>2010.2.3</span></li>
<li><a href="#">新闻列表表新闻列列表 </a><span>2010.2.3</span></li>
</ul>
</div>
</body>
</html>
收获园豆：5
正是我想要的！
@BENNY CHIA:
她这个怎么 显示不显示时间呢，只有标题，没日期？？？？
@BENNY CHIA:
再补充以下，，火狐测试 可以，其他的ie6,ie8不行。。ie7还没测呢
其他回答(1)
0
<ul id="news">
<li>
<a href="news.aspx?id=1"><span class="title">标题标题</span><span class="time">2010-05-01</span></a>
</li>
</ul>
<style type="text/css">
span.title { max-width: 200px; }
span.time { padding-left: 10px; }
</style>
要IE6实现max-width就用expression，但不建议，所以剩下的用JS写吧
<script type="text/javascript">
var spans = document.getElementsById('news').getElementsByTagName('span');
var span, className;
for (var i = 0; i < spans.length; i++) {
span = spans[i];
className = span.getAttribute('className') || span.getAttribute('class');
if (className === 'title' && span.clientWidth > 200) {
span.style.width = '200px';
}
}
</script>
