ul,li不能左右居中的问题
近期帮朋友做一个他们公司的商品站点，用到了曾经学到的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 谢谢！
ul,li不能左右居中的问题的更多相关文章
- 几个简单的css设置问题：div居中，ul li不换行 ，内容超出自动变省略号等
1 div在页面居中的问题 1)position值为relative时(相对定位),css设置属性margin:0 auto;(0 auto,表示上下边界为0,左右则根据宽度自适应相同值,即居中)即 ...
- CSS中ul li居中的问题
一直以为对ul li居中对齐已经掌握了.但最近做项目时发现之前li的float:left方法显然有一个问题,就是无法居中(水平),只能使用padding-left或margin-right的方法方法来 ...
- [笔记]ul>li>a做分布时, 让其居中显示效果
结构: <div id="page"> <ul> <li><a href="#">首页</a>< ...
- Ul li 竖排 菜单
Ul li 竖排 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
- div+css（ul li）实现图片上文字下列表布局
css样式表代码: html布局代码: 效果图: html布局部分,可根据自己需要添加对应的div即可. 1.CSS关键样式单词解释 1).ul.imglist{ margin:0 auto; wid ...
- [置顶] html学习笔记，锚点，超链接，table布局，表头，h,sub,blockquote,ul,li,ol.dl,加入收藏，打印，弹出窗口
<a name="shouye"></a> <strong>strong加粗</strong> <br> 没有加粗 &l ...
- ul li内的文字水平居中显示
head><style rel="stylesheet" type="text/css" >#top{height:140px;}#top u ...
- [转载] ul li css 做横向菜单
原文地址: http://www.cnblogs.com/amylis_chen/archive/2011/09/24/2188398.html 第一步:建立一个无序列表 我们先建立一个无序列表,来建 ...
- ul+li水平居中的几种方法
一.posotion:relative; 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF- ...
随机推荐
- B1922 [Sdoi2010]大陆争霸 最短路
我一直都不会dij的堆优化,今天搞了一下...就是先弄一个优先队列,存每个点的数据,然后这个题就加了一点不一样的东西,每次的最短路算两次,一次是自己的最短路,另一次是机关的最短路,两者取最大值才是该点 ...
- EOJ 1501/UVa The Blocks Problem
Many areas of Computer Science use simple, abstract domains for both analytical and empirical studie ...
- bzoj1231[Usaco2008 Nov]mixup2 混乱的奶牛(状压dp)
1231: [Usaco2008 Nov]mixup2 混乱的奶牛 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 1032 Solved: 588[ ...
- linux随便贴贴
在bin目录下进入mysql: ./mysql -uroot -p123456 update mysql.user set password=password('root') where user=' ...
- golang——（strings包）常用字符串操作函数
(1)func HasPrefix(s, prefix string) bool 判断字符串s是否有前缀字符串prefix: (2)func HasSuffix(s, suffix string) b ...
- 微信公众号开发之文本消息自动回复,以及系统关注自动回复，php代码
以tshop为例 直接上代码: 企业 cc_wx_sys表为自建,存储系统消息的配置的 字段: id type key status <?php /** * tpshop * ========= ...
- 2013 ACM/ICPC Asia Regional Changsha Online - J
原题戳这里. 题意: 有一未知列数a1,a2,a3.....an, 已知s[i]=a[i-1]+a[i]+a[i] (1<i<n) s[1]=a[1]+a[2]; s[n]=a[n-1] ...
- for 循环练习题
X3 * 6528 = 3X * 8256X为一个数字 填入一个数字 使等式成立 for (var x=1;x<=9&&x>0;x++) { if ((x*10+3)*65 ...
- 【Oracle】DBMS_STATS.GATHER_TABLE_STATS
月初一直在忙保监会报送的事情,苦逼的保险行业的ETL大家都懂的.今天闲来无事查看了一下前阵子的报送存储过程,发现系统隔一段时间就会调用一次DBMS_STATS.GATHER_TABLE_STATS,所 ...
- 【技术累积】【点】【java】【19】访问权限
java中的四种访问权限 范围如下表 权限 类内 同包 不同包子类 不同包非子类 Public ✔️ ✔️ ✔️ ✔️ 默认(Default) ✔️ ✔️ ️ Protected ✔️ ✔️ ✔️ P ...