为什么我的元素在屏幕最小化时重叠?
Why are my elements overlapping when screen is minimized?
我是编码新手,加入了 TOP。学习编码过程的一部分是制作 Google 主页。这很困难,但我已经取得了一些进步。我当前的问题是当我最小化屏幕时,我注意到元素重叠。我试过代码,但它仍然发生。
.googlelogo {
display: flex;
padding: 7% 10% 10%;
margin: 10% 40% 30%;
justify-content: center;
}
.about {
display: flex;
position: absolute;
bottom: 17%;
height: 80%;
margin-left: 1%;
}
.store {
display: flex;
position: absolute;
bottom: 17%;
height: 80%;
margin-left: 6%
}
.gmail {
display: flex;
position: absolute;
bottom: 17%;
height: 80%;
margin-left: 82%
}
.images {
display: flex;
position: absolute;
bottom: 17%;
height: 80%;
margin-left: 87%
_____________________________________________________________________________
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Google Homepage</title>
</head>
<body>
<div class="googlelogo">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google Logo">
</div>
<a class="about" href="https://google.com/about">About</a>
<a class="store" href="https://google.com/store">Store</a>
<a class="gmail" href="https://gmail.com">Gmail</a>
<a class="images" href="https://google.com/images">Images</a>
<div class="searchbox">
<input type="text" name="" value="">
<button type="search" name="button">Search</button>
</div>
</body>
</html>
Issue I'm having
所以我所做的更改是将锚元素标签包装在 div 中,并将那些 div 包装在部分标签中,然后为部分标签提供样式
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Google Homepage</title>
</head>
<style>
.googlelogo {
display: flex;
padding: 7% 10% 10%;
margin: 10% 40% 30%;
justify-content: center;
}
.about {
display: flex;
position: absolute;
bottom: 17%;
height: 80%;
margin-left: 1%;
}
.store {
display: flex;
position: absolute;
bottom: 17%;
height: 80%;
margin-left: 6%
}
/* CHANGES MADE BELOW */
.itemsOnTheTop{
position: absolute;
top:0;
left:0;
right:0;
display: flex;
justify-content: space-between;
align-items: center;
}
/* CHANGES MADE ABOVE */
</style>
<body>
<div class="googlelogo">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google Logo">
</div>
<!-- CHANGES MADE BELOW -->
<section class="itemsOnTheTop">
<div>
<a class="" href="https://google.com/about">About</a>
<a class="" href="https://google.com/store">Store</a>
</div>
<div>
<a class="" href="https://gmail.com">Gmail</a>
<a class="" href="https://google.com/images">Images</a>
</div>
</section>
<!-- CHANGES MADE ABOVE -->
<div class="searchbox">
<input type="text" name="" value="">
<button type="search" name="button">Search</button>
</div>
</body>
</html>
我是编码新手,加入了 TOP。学习编码过程的一部分是制作 Google 主页。这很困难,但我已经取得了一些进步。我当前的问题是当我最小化屏幕时,我注意到元素重叠。我试过代码,但它仍然发生。
.googlelogo {
display: flex;
padding: 7% 10% 10%;
margin: 10% 40% 30%;
justify-content: center;
}
.about {
display: flex;
position: absolute;
bottom: 17%;
height: 80%;
margin-left: 1%;
}
.store {
display: flex;
position: absolute;
bottom: 17%;
height: 80%;
margin-left: 6%
}
.gmail {
display: flex;
position: absolute;
bottom: 17%;
height: 80%;
margin-left: 82%
}
.images {
display: flex;
position: absolute;
bottom: 17%;
height: 80%;
margin-left: 87%
_____________________________________________________________________________
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Google Homepage</title>
</head>
<body>
<div class="googlelogo">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google Logo">
</div>
<a class="about" href="https://google.com/about">About</a>
<a class="store" href="https://google.com/store">Store</a>
<a class="gmail" href="https://gmail.com">Gmail</a>
<a class="images" href="https://google.com/images">Images</a>
<div class="searchbox">
<input type="text" name="" value="">
<button type="search" name="button">Search</button>
</div>
</body>
</html>
Issue I'm having
所以我所做的更改是将锚元素标签包装在 div 中,并将那些 div 包装在部分标签中,然后为部分标签提供样式
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Google Homepage</title>
</head>
<style>
.googlelogo {
display: flex;
padding: 7% 10% 10%;
margin: 10% 40% 30%;
justify-content: center;
}
.about {
display: flex;
position: absolute;
bottom: 17%;
height: 80%;
margin-left: 1%;
}
.store {
display: flex;
position: absolute;
bottom: 17%;
height: 80%;
margin-left: 6%
}
/* CHANGES MADE BELOW */
.itemsOnTheTop{
position: absolute;
top:0;
left:0;
right:0;
display: flex;
justify-content: space-between;
align-items: center;
}
/* CHANGES MADE ABOVE */
</style>
<body>
<div class="googlelogo">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google Logo">
</div>
<!-- CHANGES MADE BELOW -->
<section class="itemsOnTheTop">
<div>
<a class="" href="https://google.com/about">About</a>
<a class="" href="https://google.com/store">Store</a>
</div>
<div>
<a class="" href="https://gmail.com">Gmail</a>
<a class="" href="https://google.com/images">Images</a>
</div>
</section>
<!-- CHANGES MADE ABOVE -->
<div class="searchbox">
<input type="text" name="" value="">
<button type="search" name="button">Search</button>
</div>
</body>
</html>