Question

我无法在我的页面上找到灰色框https://com-bb-dev.com.edu，以便在每个分辨率上自动调整其上方两个框边框的宽度。在1440x900它看起来很正常，或者我希望它如何寻找每个用户，但是我在这里使用我的第二台显示器以不同的分辨率来测试这样的问题。

这是我到目前为止所尝试的内容：

#loginText {
padding: 12px 80px 18px 80px;
background: #5f6062;
display: inline-block;
width: 912px;
border-top: 6px solid #DADADA;
margin-left: 10.6%;
text-align: center;
}

默认情况下，此div不显示为内联框。无论出于何种原因，它的整个容器占据了屏幕的整个宽度（据我所知，这是默认情况下）。谢谢。

Answer 1

您需要对#loginText CSS进行以下更改：

Remove padding-right: 80px;
Remove padding-left: 80px;
Change margin-right: auto;
Change margin-left: auto;
Add width: 1072px;

您的问题是您的保证金是基于百分比的，它可以根据所有分辨率进行扩展。上面的方框是绝对尺寸（1072像素）;这应该使它匹配并使其居中。

Answer 2

我想我明白你要问的是什么。灰盒子的宽度并不总是与上面两个盒子的宽度相匹配的原因是因为虽然上面的盒子有一个设定的宽度，但是灰色的盒子随着浏览器的窗口宽度调整大小（因为它的两边都有百分比边距））。

将您的风格定义修改为：

#loginText {
    background: none repeat scroll 0 0 #5F6062;
    border-top: 6px solid #DADADA;
    margin: 0 auto;
    padding: 12px 0;
    text-align: center;
    width: 1072px;
}

而且我相信这会给你你正在寻找的行为。如果这不是你想要的，请告诉我，我会很乐意进一步提供帮助。祝你好运！

如何让div为每个屏幕尺寸/分辨率水平正确自动调整大小？

2 个答案: