0

这是我的一些 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;等等，没有简单地手动定义高度，这绝对不是我想要的。有什么帮助吗？

4

5 回答 5

3

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

position:absolute;（或固定）从页面的自然流中取出元素，因此<nav>没有内容使其增长。

于 2013-07-18T12:45:50.767 回答
0

Your child elements are positioned as absolute, thus also taking them out of the flow. Because of this, the .navlist element doesn't know how to expand.

Use floats to position your navigation lists and then user the overflow:hidden fix on the .navlist to have it expand to fit the child elements.

于 2013-07-18T12:52:26.343 回答
0

正如其他人所说，将子元素定位为绝对会将其拉出布局，其父元素的高度将始终为 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 示例中）

于 2013-07-18T12:57:41.123 回答
0

<li>没有它，您已经采取<ul> or <ol>了不是最佳做法。

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

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

需要像上面那样换行并且需要给出样式来移除它的默认项目符号。

于 2013-07-18T12:46:54.140 回答
0

这是由您的

position:absolute

跨度元素的规则。绝对定位的元素不会填充父容器，导致它的高度为 0px。尝试在不使用绝对定位的情况下制作相同的布局，应该没问题。

此外，<li>元素应该在<ul>父级中，而不是<span>

于 2013-07-18T12:47:02.743 回答