html - 分区高度 : 0; without any floating child elements?

Question

这是我的一些 HTML

<nav class="navlist">
    <span class="left">
        <li><a class="active" href="#">Home</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Services</a></li>
    </span>
    <span class="right">
        <li><a href="#">About</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
    </span>
</nav>

相关 CSS:

.navlist {
    position: fixed;
    top: 0;
    width: 100%;
    list-style: none;
    background-color: rgba(255,255,255,0.4);
}
.navlist span {
    position: absolute;
    margin: 10px 0;
}
.navlist .left {
    right: 0px;
    margin-right: 50%;
    padding-right: 75px;
}
.navlist .left li {
    margin-left: 75px;
}
.navlist .right {
    left: 0px;
    margin-left: 50%;
    padding-left: 75px;
}
.navlist .right li {
    margin-right: 75px;
}
.navlist li{
    display: inline;
}
.navlist li a {
    font-family: "Futura Thin", sans-serif;
    font-size: 1.2em;
    color: black;
    text-decoration: none;
}

为什么<nav>的高度是元素 0 而不是将高度包裹在子元素周围？我已经尝试了一切，添加 overflow: auto;等等，如果不简单地手动定义高度，什么都行不通，这绝对不是我想要的。有帮助吗？

Answer 1

<span>应该是 <ul>或 <li>应该是 <span> or any inline-elements使一个有效的代码。最好是使用 <ul><li><a>获取链接列表。

position:absolute; (或固定)将元素从页面的自然流中移除，所以 <nav>没有让它成长的内容。