带日期的信息列表,自适应宽度

需要实现的效果图:

在制作页面的过程中,经常会遇到这样的 信息列表(还有前面带 类别),这里总结几种实现方式,权且记录,以作参考:

1、信息不浮动，时间右浮动

2、信息左浮动，时间右浮动

3、时间右浮动，信息左浮动

4、信息不浮动，时间绝对定位右

具体代码如下：

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>带日期的信息列表自适应宽度</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
*{margin:0;padding:0}
body{font:12px/1.5 simsun;text-align:center}
div{margin:0 auto}
ul,li{list-style:none}
hr{margin:10px 0;}
a,a:visited{color:blue;text-decoration:none;}
a:hover{color:#f00;text-decoration:underline;}
.wraper{margin: 0 auto;width:300px/*设置为500px可以让文字完全显示*/;text-align:left;}
.wraper h3{}
.wraper ul{padding:10px 0;background:#f60;}
.wraper li{overflow:hidden;height:22px;line-height:22px;background:#ccc;/*white-space:nowrap;IE6下会撑大外层元素text-overflow:ellipsis;*/}
.wraper pre{white-space: pre-wrap;word-wrap: break-word;/*为pre自适应换行*/}
.demo1 span{float:right;}
.demo2 span{float:right;/*padding-left:5px; 给一个padding-left会让时间与信息文本有一定的间隔，美观上好看一些*/}
.demo3 a{float:left;}
.demo3 span{float:right;}
.demo3 li{vertical-align:bottom;}
.demo4 a{float:left;}
.demo4 span{float:right;}
.demo4 li{vertical-align:bottom;}
.demo5 li{position:relative;padding-right:70px;}
.demo5 span{position:absolute;top:0;right:0;}
</style>
</head>
<body>

<div class="wraper">
<h3>信息不浮动，时间右浮动</h3>
<ul class="demo1">
  <li><a href="#" title="">1_各位亲，你们准备好了吗？准备好了吗？好了吗？了吗？吗？</a><span>2011-01-01</span></li>
  <li><a href="#" title="">2_各位亲，你们准备好了吗？准备好了吗？好了吗？了吗？吗？</a><span>2011-02-02</span></li>
  <li><a href="#" title="">3_各位亲，你们准备好了吗？准备好了吗？好了吗？了吗？吗？</a><span>2011-03-03</span></li>
</ul>
<pre>
1、IE6下时间掉下去了，其他浏览器可以一左一右。
2、字符过长，宽度不够，时间掉下去了。
</pre>
<hr />
<h3>时间右浮动，信息不浮动</h3>
<ul class="demo2">
  <li><span>2011-01-01</span><a href="#" title="">1_各位亲，你们准备好了吗？准备好了吗？好了吗？了吗？吗？</a></li>
  <li><span>2011-02-02</span><a href="#" title="">2_各位亲，你们准备好了吗？准备好了吗？好了吗？了吗？吗？</a></li>
  <li><span>2011-03-03</span><a href="#" title="">3_各位亲，你们准备好了吗？准备好了吗？好了吗？了吗？吗？</a></li>
</ul>
<pre>
1、各浏览器表现一致，只是在IE6下，时间文本貌似下去了一点点。
2、字符过长，宽度不够，信息文本被截掉了。
</pre>
<hr />
<h3>信息左浮动，时间右浮动</h3>
<ul class="demo3">
  <li><a href="#" title="">1_各位亲，你们准备好了吗？准备好了吗？好了吗？了吗？吗？</a><span>2011-01-01</span></li>
  <li><a href="#" title="">2_各位亲，你们准备好了吗？准备好了吗？好了吗？了吗？吗？</a><span>2011-02-02</span></li>
  <li><a href="#" title="">3_各位亲，你们准备好了吗？准备好了吗？好了吗？了吗？吗？</a><span>2011-03-03</span></li>
</ul>
<pre>
1、IE6下，第二个li与第三个li之间出现间隔（应该是浮动引发的IEBUG），解决方法是为li增加 vertical-align:bottom(其中一种解决方法，还可以对li进行左浮动)。
2、字符过长，宽度不够，时间掉下去了。
</pre>
<hr />
<h3>时间右浮动，信息左浮动</h3>
<ul class="demo4">
  <li><span>2011-01-01</span><a href="#" title="">1_各位亲，你们准备好了吗？准备好了吗？好了吗？了吗？吗？</a></li>
  <li><span>2011-02-02</span><a href="#" title="">2_各位亲，你们准备好了吗？准备好了吗？好了吗？了吗？吗？</a></li>
  <li><span>2011-03-03</span><a href="#" title="">3_各位亲，你们准备好了吗？准备好了吗？好了吗？了吗？吗？</a></li>
</ul>
<pre>
1、IE6下，第二个li与第三个li之间出现间隔（应该是浮动引发的IEBUG），解决方法是为li增加 vertical-align:bottom(其中一种解决方法，还可以对li进行左浮动)。
2、字符过长，宽度不够，IE8,FF下信息文本掉下去了，IE6下信息文本显示不全，过长文字被截掉了。
</pre>
<hr />
<h3>信息不浮动，时间绝对定位右</h3>
<ul class="demo5">
  <li><a href="#" title="">1_各位亲，你们准备好了吗？准备好了吗？好了吗？了吗？吗？</a><span>2011-01-01</span></li>
  <li><a href="#" title="">2_各位亲，你们准备好了吗？准备好了吗？好了吗？了吗？吗？</a><span>2011-02-02</span></li>
  <li><a href="#" title="">3_各位亲，你们准备好了吗？准备好了吗？好了吗？了吗？吗？</a><span>2011-03-03</span></li>
</ul>
<pre>
1、表现良好，但是页面的定位元素过多会导致性能下降(具体没有试验过)
2、字符过长，宽度不够，信息文本与时间文本互相重合；字符长度长过li宽度，文本会被截取换行，还是与时间重合。
3、字符过长，宽度不够的情况下，给li一个padding-right值（值的长度是时间文本的长度），信息文本不会与时间文本重合，且多于文本会被换行隐藏
</pre>
<hr />
</div>

</body>
</html>
posted @ 2012-11-27 14:31  小鱼儿-lovefishs  阅读(294)  评论(0)    收藏  举报