ul,li不能左右居中的问题
2014-12-16 19:24
363 查看
最近帮朋友做一个他们公司的商品网站,用到了以前学到的html+css技术,当然做网站少不了Javascript和jquery这些.....
这个功能主要实现了导航条里面的条目是居中的,所以声明了ul,li的样式,始终找不到错误,怎么也不能让其中的元素居中,下面就是这段代码:
我们看到本来设想的是.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 谢谢!
这个功能主要实现了导航条里面的条目是居中的,所以声明了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 谢谢!
相关文章推荐
- ul,li不能左右居中的问题
- div滑动门 repeater内容中的ul li 不能对齐的问题解决
- css ul li导航菜单居中问题解决方法
- CSS - 关于li中图文混排不能垂直居中的问题
- div、ul、li等无法居中问题,text-align无效 margin auto无效
- CSS中ul li居中的问题
- CSS中ul li居中的问题
- ul中li标签居中问题
- layout01-在布局ul时,给li设置margin-right的时候,每行的最后一个li有margin-right 导致ul 看上去不居中的问题
- 1.ul中li整个横向居中显示问题
- CSS - ul 中 li 不能居左对齐的问题
- DEDECMS 列表页面ul li 循环调用问题
- Vi乱码/上下左右 backspace不能使用的问题
- css关于div下ul、li 留白错位问题
- css 关于ul在div里居中且平铺的问题
- css ul li问题
- ul li图片文字混排不加overflow:hidden,使文字垂直居中(完美版)
- JTable放到JScrollPane里,可以上下滚动,但是不能左右滚动问题解决
- div ul li 加a 错位问题