Question

所以我的网站出于某种原因横向或横向滚动。看起来这个页脚引起了这种情况，但我无法弄清楚这里会出现什么问题？我认为它可能与页脚中的社交图标有关，但我不太确定。赞赏一些指导

我的网站：https://jgofficial1.000webhostapp.com/index.html

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JG.OFFICAL</title>
<link rel="stylesheet" href="style.css">
<!--fonts-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
</head>

<body>
    <header>
        <div class= "logo">
            <!--h1>JG.OFFICIAL</h1-->
            <img src= "../images/logo.png" alt= "Hello" height ="60px" width ="310px">
        </div>       
        <nav> 
        <ul>
            <li><a href= "index.html">HOME</a></li>
            <li><a href= "work.html">WORK</a></li>
            <li><a href= "contact.html">CONTACT</a></li>
            <li><a href= "about.html">ABOUT</a></li>
        </ul>
        </nav> 
    </header>
    <br><br>
    <div id= "scroll1">
        <img src= "../images/scrollbutton.png" alt= "Click to scroll" height = "50" width = "50">
    </div>
    <div id= "img-wrapper">
        <img src= "../images/helloscreen.png" alt= "Hello" height= "870" width= "1228">
    </div>

    <div id= "text-wrapper2">
        <div id= "text">
            <p>Design is always in our lives, whether we like it or not.</p>
        </div>
    </div>

    <footer>
        <div class= "social-icons">
            <img src= "../images/fb-icon.png" alt= "Facebook" height= "45" weight= "45">
            <img src= "../images/yt-icon.png" alt= "YouTube" height= "45" weight= "45">
            <img src= "../images/instagram-icon.png" alt= "Instagram" height= "45" weight= "45">
            <img src= "../images/twitter-icon.png" alt= "Twitter" height= "45" weight= "45">
        </div>
    </footer>

</body>
</html>

CSS

header {
background-color: rgba(0,0,0,0.0);
height: 60px;
width: 100%;
margin-top: 0px;
}

.logo {
color: white;
font-family: 'Montserrat', sans-serif;
margin-left: 10px;
padding-bottom: 10px;
float: left;
width: 70px;
}

body {
background-image: url("../images/background1.png");
background-size: cover;
margin: 0;
}

nav {
float: right;
margin-right: 10px;
background-color: rgba(0,0,0,0.0);
}

nav ul {
list-style-type: none;
font-family: 'Oswald', sans-serif;
overflow: hidden;
margin-top: 0;
padding-top: 15px;
}

nav li {
display: inline;
padding-right: 30px;
}

nav li a {
color: white;
text-align: center;
text-decoration: none;
}

#scroll1 {
text-align: center;
margin-top: 200px;
}

#img-wrapper {
text-align: center;
margin: 0 auto;
}

#text-wrapper img {
width: 100%;
height: auto;
}

#text-wrapper2 {
background-color: rgba(0,0,0,0.4);
margin-bottom: 10px;
height: 400px;
width: 100%;
}

#scroll1 {
text-align: center;
}

#text p {
color: white;
font-family: 'Oswald', sans-serif;
padding-top: 15px;
padding-left: 15px;
} 

footer {
background-color: rgba(0,0,0,0.3);
height: 60px;
width: 100%;
padding-left: 20px;
padding-top: 8px;
}

.social-icons {
width: 100%;
}

Answer 1

现在因为两个原因。

图片的宽度为1228px
页脚的宽度为100% + 20px填充

两者都将内容推送到100% width。要修复它，您可以添加以下内容：

#img-wrapper img {
    max-width: 100%;
}

footer {
    box-sizing: border-box;
}

你不希望这种情况再次发生吗？更全面地设置这些属性，它们可能会对您有所帮助。因此，在您的CSS之上，您可以添加

* {
    box-sizing: border-box;
}

img {
    max-width: 100%;
}

为什么要使用box-sizing: border-box;？

宽度和高度属性包括内容，填充和边界，但不是边际。

来自：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Answer 2

您的页脚有padding-left: 20px;属性。如果删除或更改它，横向滚动将消失。

BTW ......检查这类事情的好方法是

* {
  background: #000 !important;
  color: #0f0 !important;
  outline: solid #f00 1px !important;
}

当我的宽度设置为100％时，为什么我的网站会横向滚动？

2 个答案: