gpt4 book ai didi

html - 消除水平滚动

转载 作者:行者123 更新时间:2023-11-28 10:25:24 25 4
gpt4 key购买 nike

我在向我的元素站点添加图像时遇到问题。

因此,当我仅使用像“img”这样的元素标签名称时,就没有水平滚动,但是当我使用像“.class img”这样的类选择器来使用该图像时,就会出现水平滚动。请帮助我,我从来没有见过这样的问题......

html,body {
height: 100%;
margin: 0;
}

nav {
display: flex;
background-color: #ffffff;
padding: 10px;
}

nav a {
text-decoration-line: none;
color: black;
font-size: 20px;
padding-right: 25px;


}

.about {
margin-left: auto;
}

.home {
padding-left: 20px;
padding-right: 0;
}

.first-img{
width: auto;
height: auto;

}
<html>

<head>

<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>
<nav>
<a class="home" href="#">Home</a>
<a class="about" href="#">About</a>
<a class="menu" href="#">Menu</a>
<a class="contact" href="#">Contact</a>
</nav>
<div class="first-img">
<img class="first" src="hamburger.jpg" />
</div>





<script type="text/javascript" src="script.js"></script>
</body>



</html>

最佳答案

您遇到此问题是因为图像的宽度将大于视口(viewport)宽度以修复水平滚动,请执行以下操作:

.first {
max-width: 100%;
height: auto
}

关于html - 消除水平滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53616402/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com