这里用到了前面文章中的清除浮动的问题,值得一注意。 先直接看一个例子吧:
<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>
看一下效果: 图中的红色部分就是要实现的效果,做为一个记录好好记录吧~
如果觉得《LI标签在Ul中居中显示》对你有帮助,请点赞、收藏,并留下你的观点哦!