Question

我在为我的网站创建导航栏时遇到了麻烦。

HTML：

<div id="header">
    <div class="headertext"><a class="headerlink" href="index">sample text</a></div>
    <div class="headernav"><a class="headerlink" href="index">HOME</a></div>
    <div class="headernav"><a class="headerlink" href="index">ABOUT</a></div>
</div>

CSS：

#header {
    background: #2980b9;
    height: 80px;
    width: 100%;
    border-bottom: 3px solid #3498db;
    color: white;
}

#header .headerlink {
    text-decoration: none;
    color: white;
}

#header .headertext {
   display: inline-block;
    position: absolute;
    left: 100px;
    font-size: 20px;
    font-weight: lighter;
    line-height: 80px;
}

#header .headernav {
    position: absolute;
    display: inline-block;
    right: 100px;
    text-align: right;
    font-size: 20px;
    font-weight: lighter;
    line-height: 80px;
}

左侧似乎没问题，但我右侧有问题...... http://jsfiddle.net/024pvmxp/

我该如何解决这个问题？

Answer 1

您的问题是：

#header .headernav {
    position: absolute;
}

通过绝对定位，您的所有.headernav元素将完全位于相同的“绝对”位置。您可能想要使用position: relative。请参阅http://www.barelyfitz.com/screencast/html-training/css/positioning/作为指南。

Answer 2

你去Fiddle :)是的，你的问题是绝对的位置（它会使你的元素脱离正常流量，所以它们彼此叠加）。在某些情况下，这是理想的行为，但不是你的情况......

<restaurant departement="75" nom="la tour d'argent"/>

css - 导航错误

2 个答案: