为什么我的网站上显示水平滚动条？ [英] Why are horizontal scroll bars shown on my website?

问题描述

我在做一个网站和一个水平滚动条显示。当然，我可以使用overflow-x，这将解决我的所有问题，但我想知道的问题的起源。有人能告诉我什么让滚动条显示出来？这是我的css：

I am making a website and a horizontal scroll bar shows. Of course, I can use overflow-x and that will fix all my problems, but I want to know the origin of the issue. Can somebody tell me what makes the scroll bar show up? Here is my css:

body {
    background-image: url("rain.jpg");
    background-repeat: no-repeat;
    background-size: 100% 800px;
}

#header {
    width: 83%;
    height: 70px;
    background-color: blue;
    border: cyan solid 3px;
    border-radius:20px;
    position: relative;
    top: 20px;
    margin: auto;
}

p {
    font-size:30px;
    font-weight: bold;
    color: yellow;  
    position: relative;
    right: -450px;
    top: -8px;
}

#container {
    position: relative;
    width: 83%;
    height: 1000px;
    top: 50px;
    margin: auto;
    background-color: blue;
}

.img {
    height: 150px;
    width: 225px;
    padding: 0px;
    padding-top: 30px;
    cursor: pointer;
    opacity: 1;
}

.click {
    height: 400px;
    width: 600px;
    position: relative;
    right: -200px;
    cursor: pointer;
}

li {
    display: inline-block;
}

推荐答案

code>< p> 元素相对定位并向右移动 right：-450px 。

Note that you have your <p> elements relatively positioned and shifted right with right: -450px.

使用 position：relative 保留元素的原始空间。因此，当你向右移动元素450px时，它的原始空间在布局中保持不变，并且文档被水平延长。这是您滚动条的可能来源。

With position: relative the original space for the element is reserved. So while you're shifting the element rightward 450px, it's original space in the layout is kept intact, and the document is lengthened horizontally. That's the likely source of your scrollbar.

删除或调整 right：-450px 规则以查看差异。

Remove or adjust the right: -450px rule to see the difference.

此外，为了对比，只需切换相对和 absolute 定位，从文档流中删除元素，原始空间被删除。

Also, simply for contrast, switch relative with absolute positioning, which removes the element from the document flow, and the original space is eliminated.

阅读更多关于MDN的CSS定位。

这篇关于为什么我的网站上显示水平滚动条？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！