在下面的代码中,导航标签的行为不像我认为的那样(并与页面底部对齐)。在萤火虫中,导航不会出现,即使在溢出之后:隐藏;风格。但是,如果我将 position: absolute, bottom: 0 应用到 ul 它可以工作。为什么会这样?nav 在这种情况下似乎没有用。
HTML:
<!DOCTYPE HTML>
<html>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">about us</a></li>
<li><a href="portfolio">porfolio</a></li>
<li><a href="contact">contact us</a></li>
</ul>
</nav>
</header>
</body>
</html>
CSS:
header {
background: url(../img/header-bg.jpg) left top no-repeat;
background-size: 100% 100%;
min-height: 400px;
position: relative;
}
/* navigation */
nav {
text-align:center;
width: 100%;
height: 100%;
overflow: hidden;
border-bottom: 2px solid #72aa21;
position: absolute;
bottom: 0;
}
nav ul {
display:inline-block;
}
nav li {
display: inline;
}
nav ul li a {
line-height: 2.6em;
padding: 0 1.5em;
display: inline-block;
position: relative;
margin: 0 .5em;
padding-left: 1.6em;
}