时间戳

首页 > 解决方案 > 导航栏没有出现在我的页面顶部，出现在奇怪的地方

html - 导航栏没有出现在我的页面顶部，出现在奇怪的地方

问题描述

1 我试图创建一个模型谷歌网站来练习我的 html 和 css 技能，不幸的是我遇到了一个奇怪的问题，我的导航菜单出现在我的图像 div 中，尽管在此之前创建。我为 navs 和 img 容器添加了背景，以使其更易于调试。感谢您的帮助，非常感谢。我在 jfiddle 上发布了我的代码副本，我试图将蓝色元素（导航）放在顶部，但无法弄清楚为什么它们会在 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>

问题图片

标签： htmlcss

解决方案

这是对的吗？这就是你想要的？

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

推荐阅读