html - 将两个不同宽度的导航栏与边距自动对齐？ CSS/HTML

Question

我正在尝试对齐比原始导航栏短的第二个导航栏，以满足原始导航栏的右侧。可能没有多大意义，所以这里有一张图片可以提供帮助: 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; }

如果有人能帮我指出正确的方向，那就太好了。

非常感谢。

Answer 1

float:right可能会解决您对第二个导航栏的问题？

编辑:我想我知道你的页面是什么样子的:你的导航栏就在 body 的正下方标签。所以让我们做一些小的改变:

1. 添加一个包含两个导航栏的 div。我们称它为nav-bar .
   <div id="nav-bar"><!--1st nav--><!--2nd nav--></div>

2. 添加一些CSS:
   #nav-bar {width:940px;height:80px; margin:0 auto; padding:0;}
#nav2 {float:right;}

并完成 nav2 的其余 css希望这有帮助