css 响应式宽度在右边距中创建额外的 space
css responsive width creating extra space in right margin
我有一个具有响应式 CSS 的网站,其媒体查询大小为 768 像素、480 像素和 320 像素。当我将大小时调整到 1040 像素以下时,相同的额外 space 出现在整个页面的右边距,我不知道这是从哪里来的。这是一个 WordPress 网站。这是 jsfiddle link.
这是一些相关的 CSS:
body,
html {
height: 100%;
width: 100%;
margin-left: -.01em;
}
body {
font-family: "ff-dagny-web-pro", sans-serif;
font-size: 16px;
font-weight: normal;
line-height: 22px;
color: black;
}
#main {
margin: 0 15%;
}
@media only screen and (max-width: 768px) {
#main {
margin: 0 10% 0 10%;
}
}
@media only screen and (max-width: 480px) {
#main {
margin: 0 5% 0 5%;
}
}
#content {
float: left;
width: 68%;
}
@media only screen and (max-width: 480px) {
#content {
width: 100%;
}
}
提前致谢!
检查 .form-search
上的 css。您的固定像素宽度为 219px
,margin-left
为 80%
。
.form-search {
height: 14px;
width: 219px;
margin: 0em 0px 0px 80%;
padding: 1em 0px 0px;
}
将像素宽度与边距百分比相结合是创建宽度超过 100% 的元素的可靠方法。
您尝试过使用网络检查器吗?它是 Web 调试不可或缺的一部分,我强烈建议学习使用 Web 检查器,这样你就可以自己发现这些类型的问题(Stack Overflow 不是调试引擎)。
我发现了有问题的对象,宽度是 div 埋在页面中间(社交图标),没有针对较小的视口调整大小。感谢所有帮助我保持专注的人。
我有一个具有响应式 CSS 的网站,其媒体查询大小为 768 像素、480 像素和 320 像素。当我将大小时调整到 1040 像素以下时,相同的额外 space 出现在整个页面的右边距,我不知道这是从哪里来的。这是一个 WordPress 网站。这是 jsfiddle link.
这是一些相关的 CSS:
body,
html {
height: 100%;
width: 100%;
margin-left: -.01em;
}
body {
font-family: "ff-dagny-web-pro", sans-serif;
font-size: 16px;
font-weight: normal;
line-height: 22px;
color: black;
}
#main {
margin: 0 15%;
}
@media only screen and (max-width: 768px) {
#main {
margin: 0 10% 0 10%;
}
}
@media only screen and (max-width: 480px) {
#main {
margin: 0 5% 0 5%;
}
}
#content {
float: left;
width: 68%;
}
@media only screen and (max-width: 480px) {
#content {
width: 100%;
}
}
提前致谢!
检查 .form-search
上的 css。您的固定像素宽度为 219px
,margin-left
为 80%
。
.form-search {
height: 14px;
width: 219px;
margin: 0em 0px 0px 80%;
padding: 1em 0px 0px;
}
将像素宽度与边距百分比相结合是创建宽度超过 100% 的元素的可靠方法。
您尝试过使用网络检查器吗?它是 Web 调试不可或缺的一部分,我强烈建议学习使用 Web 检查器,这样你就可以自己发现这些类型的问题(Stack Overflow 不是调试引擎)。
我发现了有问题的对象,宽度是 div 埋在页面中间(社交图标),没有针对较小的视口调整大小。感谢所有帮助我保持专注的人。