ul,li不能左右居中的问题
2024-10-01 05:33:36
近期帮朋友做一个他们公司的商品站点,用到了曾经学到的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 谢谢!
最新文章
- hihoCoder #1199 : Tower Defense Game ——(树型dp)
- IOS开发证书显示“此证书的签发者无效”解决方法
- poj 2153
- boost状态机学习二(秒表)
- Unbuntu 下编译安装 PHP 必要库的安装
- hdu 5150 Sum Sum Sum 水
- MVC返回图片
- 【转】Github轻松上手3-使用Tower图形化界面工具创建和管理repo
- 浅析Thinkphp框架中运用phprpc扩展模式
- 动态弹球的实现 加入了多线程技术--javaSE游戏准备工作
- SQLServer类型与Java类型转换问题解决
- windows虚拟内存管理
- Scrapy-redis<;数据库篇>;
- json基础小结
- VMSTAT监控CPU使用率,内存使用,虚拟内存交换情况
- 常用Linux VPS/服务器SSH连接工具 - Xshell下载与使用
- myeclipse10 blue版激活码
- Angular 自定义过滤器
- springmvc+hibernate在实体类中设置外键
- query:callback