ul,li不能左右居中的问题

来源：互联网发布：mac ps cc 2015 破解编辑：程序博客网时间：2024/05/03 00:06

最近帮朋友做一个他们公司的商品网站，用到了以前学到的html+css技术，当然做网站少不了Javascript和jquery这些.....

这个功能主要实现了导航条里面的条目是居中的，所以声明了ul,li的样式，始终找不到错误，怎么也不能让其中的元素居中，下面就是这段代码：

<html><head><style type="text/css">body{margin: 0;padding: 0;}.nav{width: 100%;height: 300px;text-align: center;}/* 去除掉ul本身有的样式，也曾经在这里面加text-align:cneter; */.nav ul{margin:0px auto; padding:0px;}.nav ul li{list-style: none; float: left; margin: 0 20px 0 0; display: inline;}</style></head><body><div class="nav"><ul><li>etmatch</li><li>iphone</li><li>ipad</li><li>data</li><li>line</li></ul></div></body></html>

我们看到本来设想的是.nav中的样式中设置了居中体现（text-align:center），但是我们这里多了一个条件就是float：left ，这个我们最初想的应该是让li在同一行。其实如果去掉display:inline后的效果和上段代码是一样的，但是我们的解决方案不是去掉display:inline，而是去掉float:left。这也就是浮动给ul，li带来的一些不可规避的效果，所以我们不要滥用浮动，要懂得浮动的具体原理再下手。

做这个网站的一个体会就是要在短期的时间里做成一个效果，像我这个只学过div和css的，更多的我是用别人写好的JS包，没有自己去封装一些JS功能。所以如果说想更深入的学习网页制作或者企业级网站开发，还需要看一些书籍丰富自己的学识。

转载请注明作者和出处 Coder的不平凡：http://blog.csdn.net/pearyangyang/article/details/41920503 谢谢！

0 0