我正在制作一个模拟网站，尝试学习编码，但是在div中定位h1元素时遇到问题。另一个问题是，我的横幅比顶部的黑色菜单栏更向右流动，导致用户不得不向右滚动。我不明白为什么会这样。希望所有帮助！谢谢！！
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css.css">
<title> Sankyeat Kumar | Web Developer </title>
</head>
<body>
<div id="menu">
<div><a href="index.html">Home</a></div>
<div><a href="portfolio.html">Portfolio</a></div>
<div><a href="blog.html">Blog</a></div>
<div><a href="contact.html">Contact</a></div>
</div>
<div id="banner">
<div id="heading">
<h1> Web Developer</h1>
<h4>London Based Web Developer For hire</h4>
</div>
</div>
<h2> Services </h2>
</body>
</html>
body {
margin:0px;
padding:0px;
}
@media screen and (min-width: 480px) {
#menu {
display:flex;
background-color: black;
max-height:50px;
max-width:100%;
}
#menu div {
margin: 0 auto;
color: ##678F99;
padding:10px;
}
#menu div a {
color:white;
text-decoration: none;
font-size: 1.5em;
font-family: Tahoma, Geneva, sans-serif;
}
#menu div a:hover {
text-decoration: underline;
}
#banner {
height:100vh;
width:100vw;
background-image: url('images/mountains.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
#heading {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
{
#banner #heading h1 {
color: white;
}
}
最佳答案
for targeting h1 you can use this-
you had a mistake on closing tag of css #heading
#banner {
width:100%;
/*100vw is getting a bit larger than screen because scrool bar on the right racking a little space from your screen*/
width:calc(100vw - 17px);
/* you can use this also. it minuses the scrolls width from screen width.*/
}
body {
margin:0px;
padding:0px;
}
@media screen and (min-width: 480px) {
#menu {
display:flex;
background-color: black;
max-height:50px;
max-width:100%;
}
#menu div {
margin: 0 auto;
color: ##678F99;
padding:10px;
}
#menu div a {
color:white;
text-decoration: none;
font-size: 1.5em;
font-family: Tahoma, Geneva, sans-serif;
}
#menu div a:hover {
text-decoration: underline;
}
#banner {
height:100vh;
width:100%;
width:calc(100vw - 17px);
background-image: url('images/mountains.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
#heading {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
#banner #heading h1 {
color: red;
}
}<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css.css">
<title> Sankyeat Kumar | Web Developer </title>
</head>
<body>
<div id="menu">
<div><a href="index.html">Home</a></div>
<div><a href="portfolio.html">Portfolio</a></div>
<div><a href="blog.html">Blog</a></div>
<div><a href="contact.html">Contact</a></div>
</div>
<div id="banner">
<div id="heading">
<h1> Web Developer</h1>
<h4>London Based Web Developer For hire</h4>
</div>
</div>
<h2> Services </h2>
</body>
</html>