css 为什么内容显示沿着导航栏旁边?为什么不能显示在导航栏后面?

kfgdxczn  于 2023-03-25  发布在  其他
关注(0)|答案(3)|浏览(243)

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)留出空白时,它也会影响导航栏。我不明白,请帮助。

9w11ddsr

9w11ddsr1#

通过改变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>
c3frrgcw

c3frrgcw2#

float: right;导致了这个问题。只需将clear:both;添加到带有类info2的div中。有关详细信息,请参阅CSS tricks。现在开发人员倾向于避免使用浮动。有更现代的方法来处理像flexgrid这样的布局。

* {
  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>
svujldwt

svujldwt3#

删除CSS类选择器.nav nav { float : right; }
在类.nav nav .links中添加padding: 0; justify-content: right;
(例如,我删除了类.containr中的margin

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

相关问题