我正在尝试对齐比原始导航栏短的第二个导航栏,以便与原件的右侧相交。可能没有多大意义所以这里有一个图像来帮助: http://i49.tinypic.com/nohno7.jpg
顶部导航栏的CSS是:
#nav { width:940px; height:40px; margin:0 auto; padding:0; font-size:105%; background:url(../images/bg-nav.png) 0 0 repeat-x; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; box-shadow:0 0 3px #ccc; }
第二个导航栏的CSS是:
#nav2 { width:547px; height:40px; margin:1px auto; padding:0; font-size:105%; background:url(../images/bg-nav.png) 0 0 repeat-x; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; box-shadow:0 0 3px #ccc; }
如果有人能帮我指出正确的方向,那就太好了。
非常感谢。
答案 0 :(得分:0)
float:right
可能会解决您对第二个导航栏的问题吗?
编辑:我想我的页面看起来很像:你的导航栏就在body
标签的正上方。所以让我们做一些小改动:
添加一个包含两个导航栏的div。我们称之为nav-bar
<div id="nav-bar"><!--1st nav--><!--2nd nav--></div>
添加一些css:
#nav-bar {width:940px;height:80px; margin:0 auto; padding:0;}
#nav2 {float:right;}
完成nav2的其余CSS 希望这有帮助
答案 1 :(得分:0)
.nav-container2 { width:940px; margin:auto; height:30px;}
#nav2 { width:547px; height:40px; float:right; margin:1px 0 0 0; font-size:105%; background:url(../images/bg-nav.png) 0 0 repeat-x; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; box-shadow:0 0 3px #ccc; }