NO.45 文字超出显示省略号后面小图标紧跟文字后面【2】 - 00fairy00

今天看到一个用css就可以实现这个效果的方法

代码

<!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>无标题文档</title>
<style>
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
    padding: 0;
    margin: 0;
}
ol, ul {
    list-style: none;
}
fieldset, img {
    border: 0;
}
body {
    font-family:"", sans-serif;
    background:#fff;
    font-size:12px;
    line-height:21px;
}
.contenta_news{width:288px;
margin-top:13px;float:left;}
.contenta_news h2{
width:292px;
height:30px;
margin-bottom:10px;}
.contenta_news ul{
width:320px;
height:150px;}
.contenta_news ul li em{ float:right;}
.contenta_news a{
float:left;
    color:#333;
    text-decoration:none;
    font-size:13px;
    max-width:220px;
    height:20px;
    white-space:nowrap !important;
    white-space:normal;
    overflow:hidden;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
    background:none;/*解决IE6的莫名高度*/

}
.contenta_news img{position:relative; float:left;margin-right:-80px;padding-left:8px;}
.clearfix:after{content:"";display:block;clear:both;height:0;visibility:hidden;}
.clearfix{+min-height:0;_height:1%;}
</style>
</head>
<body>
<div class="contenta_news">
   <ul>
       <li>
            <a href="#">·1.7《每日经济新闻》引用北京《每日经济新闻》引用北京美联市场研究部观点</a>
            <img src="http://bj.midland.com.cn/images/new.gif">
       </li>
       <li class="clearfix">
            <a href="">·1.4“新浪二手房"</a>
            <img src="http://bj.midland.com.cn/images/new.gif">
       </li>
       <li>
            <a href="#">·1.7《每日经济新闻》引用北京《每日经济新闻》引用北京美联市场研究部观点</a>
            <img src="http://bj.midland.com.cn/images/new.gif">
       </li>
       <li>
            <a href="#">·1.7《每日经济新闻》引用北京《每日经济新闻》引用北京美联市场研究部观点</a>
            <img src="http://bj.midland.com.cn/images/new.gif">
       </li><li>
            <a href="#">·1.7《每日经济新闻》引用北京《每日经济新闻》引用北京美联市场研究部观点</a>
            <img src="http://bj.midland.com.cn/images/new.gif">
       </li
       <li>
            <a href="#">·1.7《每日经济新闻》引用北京《每日经济新闻》引用北京美联市场研究部观点</a>
            <img src="http://bj.midland.com.cn/images/new.gif">
       </li>
       <li>
            <a href="#">·1.7《每日经济新闻》引用北京《每日经济新闻》引用北京美联市场研究部观点</a>
            <img src="http://bj.midland.com.cn/images/new.gif">
       </li><li>
            <a href="#">·1.7《每日经济新闻》引用北京《每日经济新闻》引用北京美联市场研究部观点</a>
            <img src="http://bj.midland.com.cn/images/new.gif">
       </li>
   </ul>
</div>
</body>
</html>

之前我用max-width再ie6下面是不行的，但是这里给后面的图片加了margin-right:-80px这个负的margin后就可以了，不晓得是为什么呢？

posted on 2011-01-17 17:34 00fairy00 阅读(665) 评论(0) 编辑收藏举报

刷新页面返回顶部