NavBar h1元素卡在頂部

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

嘗試在<ul>內制作<h1>如下所示：

<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;刪除此規則float:left;

Answer 2

兩個問題

header ::after之間的空格將樣式應用於header ::after每個子元素之后。
您應該清除.nav，而不是標題。

所以做到：

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

NavBar h1元素卡在頂部

問題描述

2 個解決方案

解決方案1
0 已采納 2019-03-03 19:41:08

解決方案2
0 2019-03-03 19:44:47

NavBar h1元素卡在頂部

問題描述

2 個解決方案

解決方案1 0 已采納 2019-03-03 19:41:08

解決方案2 0 2019-03-03 19:44:47

解決方案1
0 已采納 2019-03-03 19:41:08

解決方案2
0 2019-03-03 19:44:47