失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > LI标签在Ul中居中显示

LI标签在Ul中居中显示

时间:2023-07-12 06:46:14

相关推荐

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中居中显示》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。