缩放时,水平导航栏不会跨越整个页面宽度

时间:2014-01-11 20:17:26

标签: html css navbar

虽然我知道我的问题是什么,但我不知道解决方案应该是什么。我有一个导航栏:

<div class="nav">
    <a...
    <a...
</div>

与相关的CSS一起:

.nav{margin:0 auto;padding:10px 0;max-width:1280px;min-width:800px;width:84%;background:#000 url('../images/navBG.png') repeat-x;font-weight:bold;border-top:1px solid #BBB;border-bottom:1px solid #BBB;color:#FFF;}
.nav a{padding:10px;border-left:1px solid #000;border-right:1px solid #555;}

目前,这提供了84%宽度的导航栏,但背景图像不会超出此宽度。这里的'解决方案'是将nav div包装在另一个具有背景属性和100%宽度的div / span中。

当然,当您放大并且像素设置的最小宽度启动时,页面会变得比100%更宽,因此导航栏背景会停止超过该长度。

我不知道的是如何解决这个问题。无论缩放,浏览器宽度或分辨率如何,如何使用背景横跨整个页面宽度的导航栏?

0 个答案:

没有答案