或者如果删掉高度,如何让其自适应?
正常
浏览器缩小变成这样
<!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;
}
表示的是超过了隐藏,字体超过了变成三个点,空格不换行