我无法理解为什么我的
.text-box我确信它与我的 CSS 文件有关。任何意见将不胜感激。
* {
margin: 0;
padding: 0;
font-family: "Faustina", serif;
}
.header {
min-height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(249, 246, 238, 1), rgba(249, 246, 238, 0.01)), url(img/magazin.jpg);
background-position: center;
background-size: 100%;
/* position: relative; */
}
nav {
display: flex;
padding: 5% 5%;
justify-content: space-between;
align-items: center;
}
nav img {
width: 50px;
height: 50px;
margin: 0;
}
.nav-links {
flex: 1 1 0;
text-align: right;
}
.nav-links ul li {
list-style-type: none;
/* display: inline-block; */
padding: 8px 10px;
position: relative;
}
.nav-links ul li a {
font-weight: bold;
color: #000;
text-decoration: none;
font-size: 20px;
border: 0px solid transparent;
transition: 0.3s;
}
.nav-links ul li a:hover {
color: #FFF;
padding: 1% 1%;
background: rgba(3, 152, 158, 0.6);
border-radius: 10%;
cursor: pointer;
}
.text-box {
padding: 10px 25px 0px;
color: #000;
position: center;
font-size: 18px;
}
.text-box p {
text-indent: 40px;
text-align: left;
margin: 0vh 25vh;
font-size: 16px;
}<body>
<section class="header">
<nav>
<a href="index.html"><img src="img/icon.png" width="50" height="50"></a>
<div class="nav-links">
<ul>
<li><a href="">Rólam</li>
<li><a href="">Foglalkozásaim</li>
<li><a href="">Táboraim</li>
<li><a href="">Jelentkezés</li>
<li><a href="">Kapcsolat</li>
</ul>
</nav>
</section>
<div class="text-box">
<h4>Miért épp a dráma</h4>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum orci ligula, ut egestas ante molestie in.</p>
</div>
</body>这只是因为您没有关闭列表中的
<a>这是更新后的代码：
* {
margin: 0;
padding: 0;
font-family: "Faustina", serif;
}
.header {
min-height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(249, 246, 238, 1), rgba(249, 246, 238, 0.01)), url(img/magazin.jpg);
background-position: center;
background-size: 100%;
/* position: relative; */
}
nav {
display: flex;
padding: 5% 5%;
justify-content: space-between;
align-items: center;
}
nav img {
width: 50px;
height: 50px;
margin: 0;
}
.nav-links {
flex: 1 1 0;
text-align: right;
}
.nav-links ul li {
list-style-type: none;
/* display: inline-block; */
padding: 8px 10px;
position: relative;
}
.nav-links ul li a {
font-weight: bold;
color: #000;
text-decoration: none;
font-size: 20px;
border: 0px solid transparent;
transition: 0.3s;
}
.nav-links ul li a:hover {
color: #FFF;
padding: 1% 1%;
background: rgba(3, 152, 158, 0.6);
border-radius: 10%;
cursor: pointer;
}
.text-box {
padding: 10px 25px 0px;
color: #000;
position: center;
font-size: 18px;
}
.text-box p {
text-indent: 40px;
text-align: left;
margin: 0vh 25vh;
font-size: 16px;
}<body>
<section class="header">
<nav>
<a href="index.html"><img src="img/icon.png" width="50" height="50" /></a>
<div class="nav-links">
<ul>
<li><a href="">Rólam</a></li>
<li><a href="">Foglalkozásaim</a></li>
<li><a href="">Táboraim</a></li>
<li><a href="">Jelentkezés</a></li>
<li><a href="">Kapcsolat</a></li>
</ul>
</nav>
</section>
<div class="text-box">
<h4>Miért épp a dráma</h4>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum orci ligula, ut egestas ante molestie in.</p>
</div>
</body>