这样的文字内容不固定、数量不固定的标签结构我用了ul>li>a来写，现在看来有点小问题，不如用div>a这样结构更为零活。
下面代码的问题是在IE7与IE6下，最后一行的margin-bottom值显示不出来。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
*{margin:0; padding:0;}
li{list-style:none;}
.box{width:300px; background:#ccc; margin:300px auto; padding:20px; overflow:hidden;}
ul{overflow:hidden; height:100%; background:green; }
li{float:left; padding:0 10px; margin:0 10px 10px 0; background:#fff; font-size:14px; white-space: normal;}
</style>
</head>
<body>
<div class="box">
<ul>
<li>最炫民族风</li>
<li>痛快</li>
<li>好想你也在</li>
<li>不难</li>
</ul>
</div>
</body>
</html>
在最后加一个有宽度标签就可以解决这个问题。但是由于是用的ul>结构，所以最后只能多加一个li清掉上面的样式，有点悲剧。
<ul>
<li>最炫民族风</li>
<li>痛快</li>
<li>好想你也在</li>
<li>不难</li>
<li style="margin:0; padding:0; width:100%; height:0; overflow:hidden;"></li>
</ul>
如果用其他结构
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
*{margin:0; padding:0;}
.box{width:300px; background:#ccc; margin:300px auto; padding:20px; overflow:hidden;}
.tag-list{overflow:hidden; height:100%; background:green; }
a{float:left; padding:0 10px; margin:0 10px 10px 0; background:#fff; font-size:14px; white-space: normal;}
</style>
</head>
<body>
<div class="box">
<div class="tag-list">
<a href="">最炫民族风</a>
<a href="">痛快</a>
<a href="">好想你也在</a>
<a href="">不难</a>
<div style="clear:both;"></div>
</div>
</div>
</body>
</html>最后再说一下：white-space与word-wrap。
white-space:normal 默认空白被浏览器忽略掉；
white-space:nowrap文字不会换行，文本在同一行上继续显示，直到遇到br为止。
word-wrap:normal 不换行；
word-wrap:break-word 换行.如果需要，单词内部允许断行。
2620
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
