這里用到了前面文章中的清除浮動的問題，值得一注意。 先直接看一個例子吧： <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中居中显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。