html中div做的导航条怎么⽔平居中,⼀个⾃动居中的导航条实
例与相关问题
这是我刚刚作的⼀个导航条,为了让那四个LINK居中,我这样作了,但作完后发现了很多的问题,写出来和⼤家分享⼀下!
⾸先我们先来看⼀下这个导航条!
test zishu
/*zishu*/
*{ margin:0; padding:0;}
body{ font-size:12px; font-family:Verdana, "宋体", Arial; margin:100px 0;}
a:link,a:visited{color:#000; text-decoration: none;}
a:hover,a:active{color:#000;text-decoration: none;background-color: #FEFC6E;}
#nav li{ display:inline;border-right:1px solid #C97802;border-left:1px solid #C97802;margin-right:-1px; padding:6px 15px 5px 15px; line-height:25px; border-bottom:0px none; border-top:0px none;}
#nav li a{margin:1px;}
p{ margin:50px 0; text-align:center; }
[Ctrl+A 全选 注:如需引⼊外部Js需刷新才能执⾏]
问题:1、空格BUG出现我FIREFOX中,不知道为什么,如果把LI分不写在同⼀⾏,问题就出来了,你可以在上边运⾏代码中试⼀下!
2、IE和FIREFOX的微⼩区别(看下图),如果你没有发现这⼩⼩的区别,你就不会在CSS中写成padding:6px 15px 5px 15px;  也就永远不会把中间的竖线和上下两条线连在⼀起!(这其中IE6和IE7还有更微⼩的区别);
3、#nav li a{margin:1px;}这⾏是不是没有⽤?如果你这样认为你就删了试⼀下,看⾏不⾏!
4、页⾯在缩放到⼀定⼩时会折⾏,FIREFOX中⽤min-width解决,⽽IE中min-width不认识,所以只有⽤:
expression((来解决了!我在上边的代码中没有加,如果你不想折⾏就把上边#nav这⾏改成:
程序代码
复制代码 代码如下:
手机上可以打html与css的app
#nav{height:24px; border-bottom:1px solid #D28A05; border-top:1px solid #D28A05;background-
image: url(nav_bg.jpg);background-color: #FF9900; text-align:center;min-
width:400px;width: expression((documentElement.clientWidth
基本就这⾏多问题,建议⾃已作⼀下,这样你会发现特别多的问题!
另外:这篇BLOG会在FIREFOX中很难看,你就凑合看吧!
再另外:我写的难免有问题,如果真有,你就指出来,我会⾮常⾼兴的!
时间: 2006-09-26