LI标签在Ul中居中显示
生活随笔
收集整理的這篇文章主要介紹了
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> 看一下效果：
圖中的紅色部分就是要實現的效果，做為一個記錄好好記錄吧~
總結
以上是生活随笔為你收集整理的LI标签在Ul中居中显示的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS clear 清除浮动，兼容各浏览
- 下一篇： Asp程序做页面的301跳转，使得cna