文字省略号和图片提示2。

我想做出这样的效果，图如下：但是，我的代码把那个图片提示给省略了，我想问一下应该怎么修改？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style type="text/css">
.li_title {            list-style-type:none;
                       height:24px;
                       font-size:12px;
                       line-height:24px;
   width:310px;
   white-space:nowrap;overflow:hidden;text-overflow:ellipsis; /* 文字省略号 for IE */  
   -o-text-overflow: ellipsis;    /*文字省略号 for Opera */ 
   background:url(http://upload.ouliu.net/h/61c91df2639493a3f3656e1b8ba602ec.gif) no-repeat left center;
   padding-left:12px;
                       }
.li_title a {          list-style-type:none;                                    
   font-size:12px;
   line-height:24px;
   height:24px;
   width:200px;
   white-space:nowrap;overflow:hidden;text-overflow:ellipsis; /* 文字省略号 for IE */  
   -o-text-overflow: ellipsis;    /*文字省略号 for Opera */ 
   display:block;
   }
.date {float:right;margin-right:3px;}.clear {clear:both;visibility:hidden;}
  </style>
 </HEAD> <BODY>
  <div id="Conttab_p_switch1" style="width:310px;float:left;">
            <UL id="sometest">
                     <LI class="li_title"><span class="date">2011-04-23</span><A title=新疆将接回所有在外省流浪儿童 提供免费培训 href="#" target=_blank>新疆将接回所有在外省流浪儿童&nbsp;提供免费培训</A></LI> 
                     <LI class="li_title"><span class="date">2011-04-11</span><A title=药家鑫犯故意杀人罪被判死刑 民事赔偿4.5万 href="#" target=_blank>药家鑫犯故意杀人罪被判死刑&nbsp;民事赔偿4.5万</A></LI> 
                     <LI class="li_title "><span class="date">2011-04-04</span><A title=李庄漏罪案法庭裁定准许检方撤回起诉 href="#" target=_blank>李庄漏罪案法庭裁定准许检方撤回起诉</A></LI> 
                                                          
             </UL>
 <div class="clear"></div>
      </div>
     <script>
     window.onload = function(){
         var  lis = document.getElementById("sometest").getElementsByTagName("li");
            var now = new Date();
            for(var i = 0 ;i<lis.length ;i++){  
                var arr = lis[i].childNodes[0].innerHTML.split("-");
                var t = new Date(arr[0],parseInt(arr[1])-1,arr[2]);
                if(now.getFullYear()==t.getFullYear()&&now.getMonth()==t.getMonth()&&now.getDate()==t.getDate()){
                   
                    var img = "<img src='http://upload.ouliu.net/h/70b18c2113f90e2920b290ee468904d5.gif'/>";
                    lis[i].innerHTML+=img;
                }
            }
     }
     </script>
 
 </BODY>
</HTML>

解决方案 »

  1.   

    可以把 li的式样修改一下：设置右填充，在这个位置让图片作为背景图片。
    li
    {
     padding-right:20px;
     background:url(你的图片的url) left top;
    }
      

  2.   

    li里已经有一个图片作为背景了，就是红色的一个小点的图片，本来我用js验证完时间后，今天的新闻，会添加一个new的图片提示，但是，我用css的background写的，和li里的冲突，就没有出现，所以，我想问问，有没有其他方法解决。
      

  3.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
      <style type="text/css">
    .li_title {            list-style-type:none;
                           height:24px;
                           font-size:12px;
                           line-height:24px;
                           width:310px;
                           white-space:nowrap;overflow:hidden;text-overflow:ellipsis; /* 文字省略号 for IE */  
                           -o-text-overflow: ellipsis;    /*文字省略号 for Opera */ 
                           background:url(http://upload.ouliu.net/h/61c91df2639493a3f3656e1b8ba602ec.gif) no-repeat left center;
                           padding-left:12px;
                           }
    .li_title a {          list-style-type:none;                                    
                           font-size:12px;
                           line-height:24px;
                           height:24px;
                           width:200px;
                           white-space:nowrap;overflow:hidden;text-overflow:ellipsis; /* 文字省略号 for IE */  
                           -o-text-overflow: ellipsis;    /*文字省略号 for Opera */ 
                           display:block;
                           }
    .date {float:right;margin-right:3px; padding-left:20px;background:url(http://upload.ouliu.net/h/70b18c2113f90e2920b290ee468904d5.gif) left top no-repeat;}.clear {clear:both;visibility:hidden;}
      </style>
     </HEAD> <BODY>
      <div id="Conttab_p_switch1" style="width:310px;float:left;">
                <UL id="sometest">
                         <LI class="li_title"><span class="date">2011-04-23</span><A title=新疆将接回所有在外省流浪儿童 提供免费培训 href="#" target=_blank>新疆将接回所有在外省流浪儿童&nbsp;提供免费培训</A></LI> 
                         <LI class="li_title"><span class="date">2011-04-11</span><A title=药家鑫犯故意杀人罪被判死刑 民事赔偿4.5万 href="#" target=_blank>药家鑫犯故意杀人罪被判死刑&nbsp;民事赔偿4.5万</A></LI> 
                         <LI class="li_title "><span class="date">2011-04-04</span><A title=李庄漏罪案法庭裁定准许检方撤回起诉 href="#" target=_blank>李庄漏罪案法庭裁定准许检方撤回起诉</A></LI> 
                                                              
                 </UL>
                 <div class="clear"></div>
          </div>
         <script>
         window.onload = function(){
             var  lis = document.getElementById("sometest").getElementsByTagName("li");
                var now = new Date();
                for(var i = 0 ;i<lis.length ;i++){  
                    var arr = lis[i].childNodes[0].innerHTML.split("-");
                    var t = new Date(arr[0],parseInt(arr[1])-1,arr[2]);
                    if(now.getFullYear()==t.getFullYear()&&now.getMonth()==t.getMonth()&&now.getDate()==t.getDate()){
                       
                        var img = "<img src='http://upload.ouliu.net/h/70b18c2113f90e2920b290ee468904d5.gif'/>";
                        lis[i].innerHTML+=img;
                    }
                }
         }
         </script>
     
     </BODY>
    </HTML>
    这样行不行，你在日期元素容器动动脑筋。如果是当前日期的话，就在span元素里设置左填充，然后添加背景图片。
      

  4.   

    to mymoondance
    希望你能明白我的需求，我用那段js是验证span里的日期，如果，是当天，就动态地添加一个new的图片提示。
      

  5.   


    .li_title a {  
       list-style-type:none;                                    
       font-size:12px;
       line-height:24px;
       height:24px;
       width:200px;
       white-space:nowrap;overflow:hidden;text-overflow:ellipsis; /* 文字省略号 for IE */  
       -o-text-overflow: ellipsis;    /*文字省略号 for Opera */ 
       /*display:block;*/ /*这个地方去掉或者改为 display:inline; 试试*/     
    }
      

  6.   

    哦。我知道怎么处理了。应该那个列表的点是用img，而那个new图片提示用background。
      

  7.   

    哦。我知道怎么处理了。应该那个列表的点是用img，而那个new图片提示用background。
      

  8.   

    to wishifef
    你那个修改在ie6下可以，但是不兼容chrome.我知道怎么处理了。应该那个列表的点是用img，而那个new图片提示用background。