我不知道为什么，但是当我缩小我的网站时，代码似乎崩溃了，整个事情看起来很恶心。我已经检查了这个问题的其他答案，但没有一个解决方案真正适合我的代码。
body {
background-image: url(gradient.png);
background-repeat: no-repeat`enter code here`;
}
h1.heading {
color: #046289;
font-size: 50px;
margin-top: 100px;
text-align: center;
font-family: 'Poppins', sans-serif;
}
p.heading {
color: #046289;
font-family: 'Poppins', sans-serif;
font-size: 20.8px;
font-weight: 600;
position: relative;
margin-left: 70px;
top: 60px;
}
p.heading1 {
color: #046289;
font-family: 'Poppins', sans-serif;
font-weight: 400;
position: relative;
margin-left: 70px;
top: 50px;
}
img.aml {
width: 280px;
height: 280px;
position: absolute;
margin-left: 360px;
bottom: 30px;
}
iframe.livevid {
position: absolute;
margin-left: 840px;
}
p.vid {
color: #046289;
font-family: 'Poppins', sans-serif;
font-size: 20.8px;
font-weight: 600;
position: absolute;
margin-left: 840px;
top: 307px;
}
p.vid1 {
color: #046289;
font-family: 'Poppins', sans-serif;
font-weight: 400;
position: absolute;
margin-left: 840px;
top: 353px;
}
a {
text-decoration: none;
}
p a:link {
color: #4204a5;
}
p a:visited {
color: #4204a5;
}
p a:hover {
color: #71a3f2;
}
/*
BELOW - NAVIGATION BAR
*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
}
li {
float: left;
}
.spacefornav {
margin-left: 462px;
}
li a:hover {
color: #71a3f2;
}
div.nav {
color: #046289;
}
li a {
display: inline-block;
color: #046289;
text-align: center;
padding: 8px 10px;
text-decoration: none;
font-family: 'Poppins';
sans-serif;
margin: 0px 20px;
font-weight: 500;
cursor: pointer;
}<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Childish Gambino</title>
<meta charset="UTF-8">
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&subset=devanagari,latin-ext" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<h1 class="heading">CHILDISH GAMBINO</h1>
<ul>
<div class="nav">
<li class="spacefornav"><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="music.html">Music</a></li>
<li><a href="contact.html">Contact</a></li>
</div>
</ul>
<p class="heading">"AWAKEN MY LOVE!"</p>
<p class="heading1">
Childish Gambino's latest
<br> and freshest album is
<br> AVAILABLE NOW on <a href="https://itunes.apple.com/us/album/awaken-my-love/id1173655524" target="_blank">iTunes</a>,
<br>
<a href="https://play.spotify.com/album/4xnq1L6P551Qcb9gBXNMK7" target="_blank">Spotify</a> and <a href="https://play.google.com/store/music/album?id=Bc3g3mmud6z3xm6todpsldagple&tid=song-Tdcdooebkcepkmj7amghovz2ncq&hl=en" target="_blank">Google Play Music</a>
</p>
<img src="images/awakenmylove.jpg" class="aml" title="'Awaken My Love!' album art">
<<iframe width="280" height="158" src="https://www.youtube.com/embed/6v7W513Wj3g?rel=0" frameborder="0" allowfullscreen class=livevid></iframe>
<p class="vid">Watch Now!</p>
<p class="vid1">Childish Gambino performing '3005'<br>live at Splendor In The Grass!</p>
</body>
</html>最佳答案
如果您使用一些完全适合其他 DIV 的内联 DIV，则可能会发生此问题。放大/缩小像素时被分割。如果您给 DIV 的一个额外的像素空间，它是固定的。
关于html - 当我缩小和放大时，网站布局变得疯狂，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43976790/