如何正确地将宽度设置为百分位数并以像素为单位保留最小宽度？

Question

所以我有一个标题/导航栏div，这个div有一个repeat-x背景图像。然后我得到了一个水平导航，它的中心是这个背景，但需要一个最小宽度和正常宽度。

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

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背景图像就会切断(当滚动->以显示网站的其余部分时)。

我该如何在#bar上保留我的repeat-x背景图像，并保持中心包裹居中，并包括最小宽度和百分位数宽度？

Answer 1

将此代码添加到您的Css，Magic！:D

body{min-width: 1000px;}

问题是，body将窗口对象的宽度作为最大宽度，而后代将该宽度作为继承。发生的情况是：

您将窗口(浏览器)的大小调整为300px宽度，然后body的宽度= 300px，然后.center-wrap =300px的80%，因此将body的最小宽度设置为固定的数字可以解决这个问题