LI标签在Ul中居中显示

这里用到了前面文章中的清除浮动的问题，值得一注意。 先直接看一个例子吧：

<style>
*{margin:0;padding:0;}
ul,ul li{list-style:none;}
.clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clear{zoom:1;}
.first{background:#ccc;}
.first ul li{background:#ececec;width:100px;height:100px;margin:10px;float:left;}

.second{background:red;text-align:center;margin-top:10px;}
.second ul{}
.second ul,.second ul li{padding:20px;}
.second ul li{background:yellow;margin:5px;display:inline;}
.second ul li a{}
</style>
<div class="first">
<ul class="clear">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

<div class="second">
<ul class="clear">
<li><a href=#>asdf</a></li>
<li><a href=#>asdf</a></li>
<li><a href=#>asdf</a></li>
<li><a href=#>asdf</a></li>
<li><a href=#>asdf</a></li>
</ul>
</div>

<div class="first" style="margin-top:10px;">
<ul class="clear">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

看一下效果： 图中的红色部分就是要实现的效果，做为一个记录好好记录吧~