我的网页托管在github页面上。如果在大屏幕上，它运行得很好。但是，每当我和我的朋友在比网页小的设备或窗口上打开网页时，向左滚动的选项不存在。相反，它可以向右滚动（到图像的右端）。我该如何解决这个问题？是什么导致了这个错误？
这是我的github repo的链接：https：https://github.com/vroomeee/miniblog这是我实际网页的链接：https://vroomeee.github.io/miniblog
我曾在谷歌上搜索过类似的问题，但我找到的最接近的是：Can't scroll to the left on the webpage。然而，它仍然没有答案。
我试过溢出：自动;和边距：0 auto; with div，但它们似乎都不起作用。
下面是我的html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=0.7">
<title>In the memory of vroomeee</title>
<link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>
<div id="container">
<h1>Vroomeee pictures</h1>
<img src="1.JPG" alt="a picture of vroomeee">
<br>
<button>get next photo</button>
<p>부름이 보고 싶다ㅎㅎ</p>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>下面是我的css文件：
h1{
color: purple;
font-weight: 1;
text-transform: uppercase;
border-top: 5px solid;
font-size: 75px;
margin: 40px;
letter-spacing: 2px;
}
body {
background-color: salmon;
color: purple;
font-family:sans-serif;
font-weight: bold;
}
img {
height: 500px;
border-radius: 0%;
}
button {
margin: 30px auto 0;
padding: 20px 25px;
background-color: salmon;
font-size: 20px;
text-align: center;
border:1px solid #2E1263;
text-transform: uppercase;
text-decoration: none;
outline: none;
letter-spacing: 4px;
color: purple;
}
button:hover {
text-decoration: underline;
transition: 0.4s;
background-color: purple;
color: salmon;
}
#container{
display:flex;
flex-direction: column;
align-items:center;
justify-content: center;
height:100vh;
}
1条答案
按热度按时间xxls0lw81#
你有没有试过在图片的容器或主体中添加一个最小宽度的图片尺寸？虽然我不知道你为什么想要水平滚动。也许可以在图片中添加一个最大宽度：100vw？