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，然后将位置固定为相对，并在导航栏上添加了一个float，以使各项目对齐并一起滚动。

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

导航栏和内容之间的空间

1 个答案: