首页 > 浏览器缩小,li错位

浏览器缩小,li错位

或者如果删掉高度,如何让其自适应?
正常

浏览器缩小变成这样

<!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>
    .searchNewslist{  height:auto;   padding-top:15px; padding-left:22px;  }
.searchNewslist li{width:96%; height:32px; line-height:32px; *height:28px; *line-height:28px; background:url(../images/uldian2.jpg) no-repeat 0px 14px; padding-left:15px; font-size:14px; list-style:none;}
.searchNewslist li a{float:left;}
.searchNewslist li span{float:right; color:#888889;}
</style>
</head>

<body>
 <ul class="searchNewslist">
       
            <li><span>[2016-04-02]</span><a target="_blank" href='WebSite/14/news/2643.html'>金点子征集-来稿要求(概要)</a></li>
        
            <li><span>[2015-06-17]</span><a target="_blank" href='WebSite/14/news/2622.html'>“江门两新党建”喜获全国“两新党建”微信平台年发布数第五名 在全国“两新”组织党建工作机关官方微信年发布数中名列第一</a></li>
        
            <li><span>[2015-06-17]</span><a target="_blank" href='WebSite/14/news/2615.html'>江门市抓住储、育、用、管四个环节建立健全优秀年轻干部培养选拔链</a></li>
        
            <li><span>[2015-06-17]</span><a target="_blank" href='WebSite/14/news/2614.html'>江门市选派年轻后备干部到农村一线扶贫墩苗</a></li>
        

    </ul>
    

</body>
</html>

建议右边设置绝对定位定在右边,并给父元素设置同样宽度的右padding则能达到满意的换行效果。


给a标签设置最大宽度 max-width: 80%;

                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis; 就可以了

你第二个图 是放大的吧,不是缩小。错位是因为你的a标签宽太宽了,这一行容纳不下,所以换到第二行了。


这是布局css的问题,你没有处理好span,a标签的关系

.searchNewslist li{
    width:96%; 
    height:32px; 
    line-height:32px;
    *height:28px;*
    line-height:28px;
    background:url(../images/uldian2.jpg) no-repeat 0px 14px;
    padding-left:15px; font-size:14px; list-style:none;
    
    /*加上这个样式*/
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    }

表示的是超过了隐藏,字体超过了变成三个点,空格不换行

【热门文章】
【热门文章】