为什么我的网站上显示水平滚动条？答案

【问题标题】：Why are horizontal scroll bars shown on my website?为什么我的网站上显示水平滚动条？
【发布时间】：2022-04-24 00:19:43
【问题描述】：

我正在制作一个网站并显示一个水平滚动条。当然，我可以使用overflow-x，这将解决我所有的问题，但我想知道问题的根源。有人能告诉我是什么让滚动条出现吗？这是我的 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;
}

【问题讨论】：

标签： html css

【解决方案1】：

请注意，您的<p> 元素相对定位并与right: -450px 一起右移。

position: relative 保留元素的原始空间。因此，当您将元素向右移动 450 像素时，它在布局中的原始空间保持不变，并且文档被水平拉长。这就是滚动条的原因。

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

另外，为了对比，将relative 与absolute 定位切换，这会将元素从文档流中移除，并消除原始空间。

Read more about CSS positioning at MDN.

【讨论】：

【解决方案2】：

我会指出这一点。

p{
    ...
    position: relative;
    right: -450px;
    ...
}

【讨论】：

【解决方案3】：

只需使用这些行

body {
margin:0;
padding:0;
overflow-x:hidden;
}

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。