css - 如何让 div 为每个屏幕尺寸/分辨率自动水平自动调整大小?

标签 css html

我无法在我的页面上显示灰色框,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 不显示为内联框。无论出于何种原因,它的整个容器都占据了屏幕的整个宽度(据我所知,这是默认设置)。谢谢。

最佳答案

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

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

您的问题是您的利润率是基于百分比的,它会在所有分辨率上缩放。您上面的方框是绝对尺寸 (1072px);这应该使它匹配并居中。

关于css - 如何让 div 为每个屏幕尺寸/分辨率自动水平自动调整大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17837441/

相关文章:

html - 显示 :none/Display:block with Combined Sibling Selectors

html - 在纯 CSS 中,是否可以将边距设置为等于当前元素的高度?

css - 如何调整任何屏幕尺寸的 div 和内容?

css - 如何更改 Bootstrap 3 中文本区域的焦点发光?

javascript - 如何在 php 中单击浏览器的刷新或后退按钮时创建警告框?

javascript - 输入字段在输入后不可编辑

使用 html() 后 JQuery 重新绑定(bind)

javascript - 是否存在加速 jquery 和 jqueryui 加载的方法?

html - 并排对齐两个元素并强制它们保持水平

html - 表格装订线 Bootstrap