html - 导航栏和内容之间的空间

Question

我目前正在学习一些 css 和 html，并决定通过制作一个非常基础的网页来练习。我成功地制作了一个透明的导航栏，但现在我想添加一个标题，但每次我尝试添加标题时它都会覆盖我的导航栏。以下是我的代码，任何帮助将不胜感激!

编辑:我想在导航栏之后(下方)添加一个标题!

.navbar {
  margin: 0 !important;
  width: 100%;
  padding: 20px;
  margin-bottom: 20px;
  position: fixed;
  align-items: center;
  justify-content: center;
  top: 0px;
}

.navbar ul li {
  list-style-type: none;
  display: inline;
}

<div class="navbar">
  <ul>
    <li>content</li>
    <li>content</li>
  </ul>
</div>

<div> 
  <h1> Content </h1> 
</div> 

Answer 1

我为带有 float:left 的标题创建了一个 div，然后将 position fixed 更改为 relative 并向导航栏添加了一个 float left，这样元素就会排成一行并一起滚动。

.navbar {
  margin: 0 !important;
  width: 100%;
  padding: 20px;
  margin-bottom: 20px;
  position: relative;
  align-items: center;
  justify-content: center;
  top: 0px;
  float:left;
}

.navbar ul li {
  list-style-type: none;
  display: inline;
}
.header{
width:100%;
height:100px;
float:left;
background-color:green;


}

<div class="navbar">
  <ul class="special_ul">
    <li>content</li>
    <li>content</li>
  </ul>
</div>
<div class="header"></div>