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>没有内容可以使其增长。

Answer 2

您已经<li>没有<ul> or <ol>这不是最佳做法。

absolute：元素相对于其第一个定位（非静态）祖先元素定位，因此其容器没有特定值。

<ul>
        <li><a class="active" href="#">Home</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Services</a></li>
</ul>

需要如上所述进行换行，并且需要提供样式以删除其默认项目符号。

Answer 3

这是由你的

引起的

position:absolute

对span元素的规则。绝对定位的元素不会填充父容器，导致其高度为0px。尝试使用相同的布局而不使用绝对定位，你应该没问题。

此外，<li>元素应位于<ul>个父级，而不是<span>

Answer 4

您的子元素被定位为绝对元素，因此也将它们从流中取出。因此，.navlist元素不知道如何扩展。

使用浮动来定位导航列表，然后使用.navlist上的overflow:hidden修正来扩展它以适应子元素。

Answer 5

正如其他人所说的那样，将子元素定位为绝对会将其拉出布局，其父级将始终具有0的高度，因为它在技术上没有布局。

这完全取决于你的最终结果应该是什么样的，所以很难建议但是你可能想要的一点点减少（用红色背景颜色使其在导航器上设置明显的高度在这里：

http://jsbin.com/osobor/1/

 .navlist {
    position: fixed;
    top: 0;
    width: 100%;
    list-style: none;
    background: red;
}

.navlist ul {
    float: left;
    width:50%;
    padding:0; 
    margin: 0;
    list-style: none;
}

.navlist .right {
    float:right;
}

.navlist li a {
    font-family: "Futura Thin", sans-serif;
    font-size: 1.2em;
    color: black;
    text-decoration: none;
}

编辑：如果你在其中嵌入LI，你的跨度也应该是UL（或OL）元素（我已将其添加到jsbin示例中）

div高度：0;没有任何浮动子元素？

5 个答案: