Question

在以下代码中，nav标签的行为与我认为的不符（并与页面底部对齐）。在firebug中，即使在溢出之后它也不会出现导航：隐藏;样式。但是，如果我应用位置：绝对，底部：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;
    }

Answer 1

您的<nav>实际上位于您告诉它的底部。但是，它也有100％的高度，其内容位于顶部。

只需删除height: 100%即可。http://jsfiddle.net/qHvB4/

为什么HTML5导航标记的行为不符合预期？

1 个答案: