我试图将导航栏放在页眉 div 中，但它被推出了......所以导航栏出现在页面的中心。 你对如何解决这个问题有什么建议吗？感谢您的帮助!
这是我的 HTML
<body>
<div class="fondo">
<div class="header"> <!--barra de navegacion -->
<div class="logo">
<object data="/Users/MaxRuizTagle/Desktop/guardado por illustrator/been.svg" type="image/svg+xml" alt="logo">
<!--[if lte IE 8 ]-->
<img src="/Users/MaxRuizTagle/Desktop/guardado por illustrator/images/been.png" alt="Logo"/>
<!--[endif]-->
</object>
</div>
<div class="container">
<div class="sixteen columns">
<ul id="nav">
<li><a href=""> HOME</a></li>
<li><a href="">SPEISEKARTE</a></li>
<li><a href="">RESERVIERUNG</a></li>
<li><a href="">LOCATION</a></li>
<li><a href="">JOBS</a></li>
<li><a href="">KONTAKT</a></li>
<li><a href="">DJs</a></li>
</ul>
</div>
</div>
<div class="footer">
</div>
</div>
</div>
</body>
和CSS
body {
margin: 0 0 0 0;
height:1000px;
font-family: 'Myriad Pro', 'Helvetica Neue', Arial, sans-serif;
}
.fondo {
min-width:100%;
min-height: 80%;
background-image: url('../Img/imagenes/fotoportada.jpg');
background-size: cover;
position: absolute;
background-repeat: no-repeat;
}
.header {
min-width: 100%;
min-height: 100px;
max-height:100px;
background-color:rgb(255,255,255);
}
.footer {
background-color:rgb(28,92,144);
min-width: 100%;
height:400px;
position: absolute;
top: 100%;
}
ul#nav {
margin: 147px 0 0 120px;
float: left;
}
ul#nav li{
margin-right: 30px;
font-size: 1.1em;
display: inline;
}
.logo {
max-width: 20%;
}
.logo object, img {
min-width:100%;
float:left;
position: relative;
top:-25px;
}
最佳答案
您已经为 ul#nav 元素设置了 147px 的顶部 margin。这就是它被压低的原因。改变它并设置一个合适的值。
ul#nav {
/* margin: 147px 0 0 120px; */
float: left;
}
关于css - 内部 div 被推出父 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21666317/