2

所以我有一个标题/导航栏 div，这个 div 有一个 repeat-x 背景图像。比我有一个以该背景为中心的水平导航，但需要最小宽度和正常宽度。

我希望它显示为 80% 宽度，最小宽度 1000 像素，并居中。

CSS

.center-wrap {
width: 80%;
min-width: 1000px;
margin: 0 auto;
}
#bar {
width: 100%;
height: 50px;
background-image: url(images/background.jpg);
background-repeat: repeat-x;
}

HTML

<div id="bar">
    <div class"center-wrap">
        UL LI HERE
    </div>
</div>

错误

现在的问题是，如果我将页面大小调整到 1000px 以下，repeat-x 背景图像会被切断（滚动时 -> 显示网站的其余部分）。

我将如何保持我的 repeat-x 背景图像打开#bar并保持 center-wrap 居中并包括最小宽度和百分位宽度？

4

1 回答 1

1

将此添加到您的 CSS，魔术！:D

body{min-width: 1000px;}

问题是主体将窗口对象宽度作为最大宽度，而后代则将该宽度作为遗产。会发生什么：

您将窗口（浏览器）的大小调整为 300px 宽度，然后 body 的宽度 = 300px，然后 .center-wrap = 300px 的 80%，因此将 body 的 min-width 设置为固定数字可以修复它

于 2012-10-12T16:03:20.573 回答