Image here
你好,我正在创建一个英雄节,但我写的信息显示在导航栏。我希望它显示在导航栏下。我找不到解决方案。请帮助。我不擅长css
* {
background-color: #171717;
color: white;
font-family: "Open Sans", sans-serif;
}
.container {
margin: 0 25%;
margin-top: 1%;
}
.nav nav {
float: right;
}
.nav nav .links {
display: flex;
list-style: none;
}
.nav nav .links .link {
margin: 0 20px;
font-size: 1em;
font-weight: 500;
}
<div class="container">
<div class="nav">
<nav>
<ul class="links">
<li class="link">Home</li>
<li class="link">Project</li>
<li class="link">About</li>
<li class="link">Contact</li>
</ul>
</nav>
</div>
</div>
<div class="container info2">
<h1>Hello</h1>
</div>
我想hello显示在导航栏下面。当我尝试给info2(hello)留出空白时,它也会影响导航栏。我不明白,请帮助。
3条答案
按热度按时间9w11ddsr1#
通过改变hello标记在代码中的位置并使用flex,我认为你可以做到这一点。
c3frrgcw2#
是
float: right;
导致了这个问题。只需将clear:both;
添加到带有类info2的div中。有关详细信息,请参阅CSS tricks。现在开发人员倾向于避免使用浮动。有更现代的方法来处理像flex和grid这样的布局。svujldwt3#
删除CSS类选择器
.nav nav { float : right; }
在类
.nav nav .links
中添加padding: 0; justify-content: right;
(例如,我删除了类
.containr
中的margin
)