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

jdhh_hcm

浏览: 11699 次
性别:
来自: 杭州

最近访客更多访客>>

走丢的门牙

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2011-09 ( 9)
更多存档...

博客分类：

css ul li li浮动

在页面当中总是有这样那样的自适应宽度的 li 列表，一般做的是信息列表，有的许多都带了时间。
对于这样的，我们总是希望一个css类能够重用到相关类型的列表，我就是这样的一个想法
今天再群里面提出这样的一个东西，大家都踊跃参与了讨论，我也得到一些想法，现在记录一下
也许里面的做法不是最好的，但是实现是比较简单的，如果有更好的方法，欢迎大家回帖讨论！
下面是相关代码：

<!doctype html>
<html lang="zh">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>带日期的信息列表自适应宽度</title>
<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{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>

本文第一次发是在 w3cfuns.com社区(http://www.w3cfuns.com/forum.php?mod=viewthread&tid=1836),现把此文作为的我第一篇iteye博文,以作纪念.