将两个不同宽度的导航条与自动边距对齐? CSS / HTML

时间:2012-09-06 22:39:13

标签: html css navigationbar

我正在尝试对齐比原始导航栏短的第二个导航栏,以便与原件的右侧相交。可能没有多大意义所以这里有一个图像来帮助: 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; }

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

非常感谢。

2 个答案:

答案 0 :(得分:0)

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;}

  3. 完成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; }