導航欄未出現在我的頁面頂部，出現在怪異的地方

Question

1我試圖創建一個模型google網站來使用html和css來練習我的技能，不幸的是，我遇到了一個奇怪的問題，盡管我的導航菜單是在此之前創建的，但它仍出現在圖像div中。 我已將背景添加到導航和img容器中，以使其易於調試。 謝謝大家的幫助。 我在jfiddle上發布了我的代碼的副本，我試圖將藍色元素（nav）放在頂部，卻無法弄清楚它們為什么會在div中。

https://jsfiddle.net/thd2vh2b/1/4

感謝您的任何幫助，非常感謝。

碼

<!DOCTYPE html>
<html>
<head>
<title> Google.ca </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>


nav {
padding:0;
margin:0;
background-color: blue;
}


div {
background-color:yellow;
text-align:center;
padding-top:100px;
padding-bottom: 75px;
margin: auto;


}



nav ul li{
display:inline;
display:inline;
margin-right: 

}

#nav1 {

float:left;
display:inline;


}


#nav2 {
float:right;
display:inline;
margin:8px;

}
footer li {

float: left;
margin:8px;
display:inline;
}

#rightbar li{
float:right;
}

</style>
</head>
<body>
<div id="top">
<nav id="nav1">
<ul style="list-style-type:none;">
<li> <a href="" >About</a></li>
<li> <a href="" >Store</a></li>
</ul>
</nav>
<nav id="nav2">
<ul style="list-style-type:none;">
<li> <a href="" >Gmail</a></li>
<li> <a href="" >Images</a></li>
<li> <a href="https://www.google.ca/intl/en/about/products/"><img src="gsquare.png" ></a></li>
<li><a href="https://support.google.com/accounts/answer/1714464"> <img src="gbell.png" ></a></li>
<li><a href="https://accounts.google.com/ServiceLogin/"><li> <img src="user.png" ></a></li>
</ul>
</nav>
</div>
<div>
<img src="logo.png";>
</div>
<footer id="rightbar";>
<ul style="list-style-type:none;">
<li><p>Privacy</p></li>
<li><p> Terms </p></li>
<li><p> Settings</p></li>
</ul>
</footer>
<footer>
<ul style="list-style-type:none;">
<li><p>Advertising</p></li>
<li><p> Business</p></li>
<li><p> Business</p></li>
</ul>
</footer>
</body>
</html>

問題圖片

Answer 1

這是正確的嗎？ 那就是你想要的嗎？

 #divname { background-color:yellow; text-align:center; padding-top:100px; padding-bottom: 75px; margin: auto; } div ul li{ display:inline; margin-right: 10px; } #nav1 { display:inline-block; background-color:blue; } #nav2 { float:right; display:inline; margin:8px; background-color:blue; } footer li { float: left; margin:8px; display:inline; } #rightbar li{ float:right; }

 <html> <head> <title> Google.ca </title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="StackQ.css"/> </head> <body> <div id="nav1"> <ul style="list-style-type:none;"> <li> <a href="" >About</a></li> <li> <a href="" >Store</a></li> </ul> </div> <div id="divname"> <div id="top"> <div id="nav2"> <ul style="list-style-type:none;"> <li> <a href="" >Gmail</a></li> <li> <a href="" >Images</a></li> <li> <a href="https://www.google.ca/intl/en/about/products/"><img src="gsquare.png" /></a></li> <li><a href="https://support.google.com/accounts/answer/1714464"> <img src="gbell.png"/></a></li> <li><a href="https://accounts.google.com/ServiceLogin/"> <img src="user.png" /></a></li> </ul> </div> </div> <div id="a"> <img src="logo.png"> </div> </div> <footer id="rightbar"> <ul style="list-style-type:none;"> <li><p>Privacy</p></li> <li><p> Terms </p></li> <li><p> Settings</p></li> </ul> </footer> <footer> <ul style="list-style-type:none;"> <li><p>Advertising</p></li> <li><p> Business</p></li> <li><p> Business</p></li> </ul> </footer> </body> </html>

導航欄未出現在我的頁面頂部，出現在怪異的地方

問題描述

1 個解決方案

解決方案1
0 已采納 2018-05-01 06:59:00

導航欄未出現在我的頁面頂部，出現在怪異的地方

問題描述

1 個解決方案

解決方案1 0 已采納 2018-05-01 06:59:00

解決方案1
0 已采納 2018-05-01 06:59:00