为什么内容与导航栏一起显示？为什么在navbar之后显示不了？

Question

你好，我正在创建一个英雄部分，但我正在编写的信息显示在导航栏中。我希望它显示在导航栏下。我找不到解决方案。请帮忙。我不擅长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) 提供边距时，它也会影响导航栏。我不明白请帮忙。

Answer 1

通过更改代码中的 hello 标记位置并使用 flex，我认为你可以做到这一点。

* {
  background-color: #171717;
  color: white;
  font-family: "Open Sans", sans-serif;
}

.container {
  margin: 0 25%;
  margin-top: 1%;
  display: flex;
  flex-direction: column;
}

.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 class="container info2">
     <h1>Hello</h1>
   </div>
</div>

Answer 2

这是导致问题的

float: right;

。只需将

clear:both;

添加到带有 class info2 的 div。有关详细信息，请参阅CSS 技巧。如今，开发人员倾向于回避使用浮动。有更多现代的方式来处理像flex和grid这样的布局。

* {
  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;
}

/* added this */
.info2 {
  clear: both;
}

<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>

Answer 3

只需删除您的 CSS 类选择器

.nav nav { float : right; }

在课堂上

.nav nav .links

添加

padding: 0; justify-content: right;

（例如，我删除了课堂上的

margin

.containr

）

* {
  background-color: #171717;
  color: white;
  font-family: "Open Sans", sans-serif;
}

.container {
/*  margin: 0 25%; */
  margin-top: 1%;
}

.nav nav .links {
  display: flex;
  list-style: none;
  padding: 0;
  justify-content: right;
}

.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>