Question

我希望我的导航栏具有h1元素和li元素以保持底部。当我希望h1元素像li元素一样位于底部时，它会卡在顶部。我将图像和代码粘贴到下面。

body{
  margin:0;
  padding:0;
  display:block;
  background-color:#abb2bc;
}



.container{


}

#Home{
  font-size:20px;
  display: inline;
  text-align:center;
  
}

main ::after{
  content:"";
  display:table;
  clear:both;
}

.nav{
  background-color: #363b42;
  font-family: 'Roboto Slab',serif;


}

.nav a:hover{
  color:#29703f;
  text-decoration: overline;
  font-size:22px;
}


.nav a{
  text-decoration: none;
  color:black;
  font-size: 20px;
  text-transform: uppercase;

}

.nav ul{
  margin:0;
  list-style: none;
  float: right;
  display: inline;
  padding:0px;

}

header ::after {
  content:"";
  display:table;
  clear:both;
}

.nav li{
  display: inline-block;
  margin-left: 75px;
  padding-right: 25px;
  padding-top: 30px;
  text-align:center;

}

.nav h1{
  float:left;

}

<!DOCTYPE html>
<html>

<head>
  <title>Fortnite Tips</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <!-- Navigation bar -->
  <header class="container">
    <div class="nav">
      <a><h1 id="Home">GamingCoachBlog</h1></a>
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact<a /></li>
      </ul>
    </div>
  </header>
</body>

如果您能解释为什么这不起作用，我将不胜感激。我一直在学习这一点，因为我仍在学习如何制作响应式网站。

Answer 1

尝试在<h1>内制作<ul>，如下所示：

<ul>
  <li><a><h1 id="Home">GamingCoachBlog</h1></a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact<a /></li>
</ul>

并在您的CSS float:left;

中删除此规则

Answer 2

两个问题

header ::after之间的空格将样式应用于标头的每个子元素之后。
您应该清除.nav而不是标题。

因此做到：

.nav::after {
    content: "";
    display: table;
    clear: both;
}

NavBar h1元素卡在顶部

2 个答案: