html - CSS定位？

Question

我希望有人可以帮助我解决一个简单的 CSS 定位问题。 我想在顶部导航旁边显示一个链接，但我不希望它在不同的浏览器尺寸下移动。

我已经创建了一个名为“语言”的类的 div，如下所示。

        <!-- nav -->
            <nav id="nav-main" role="navigation"> 
                <?php alanbrandt_nav(); ?>
            </nav>
            <div class="language">
                <a href="http://alanbrandt.dk" target="_blank">Dansk</a>
            </div>

我还创建了以下 CSS 类，但是当我使用它时，无法单击菜单中的所有文章链接。就好像链接已从菜单项中删除一样。

.language {
  position:relative;
  left:340px;
  top:-27px;

}

理想情况下，链接应与图像的右边缘对齐，但与顶部导航栏水平对齐。以上实现了正确的布局，但由于没有任何菜单项处于事件状态，因此导航无法正常工作。

http://alanbrandt.com

谁能告诉我该怎么做？

谢谢

Answer 1

您应该将您的语言 div 放入 nav 中，并使用绝对定位:

HTML

<!-- nav -->
<nav id="nav-main" role="navigation"> 
    <?php alanbrandt_nav(); ?>
    <div class="language">
        <a href="http://alanbrandt.dk" target="_blank">Dansk</a>
    </div>
</nav>

CSS

#nav-main {
    position: relative;
    width: 760px;
    margin: 0 auto;
}
#nav-main .language {
    position: absolute;
    right: 0;
    top: 0;
}