這樣的文字內容不固定、數量不固定的標籤結構我用了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 換行.如果需要，單詞內部允許斷行。