html - CSS定位？

Question

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

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

        <!-- 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

你需要在类名前加一个点：

.language {
  position:relative;
  left:200px;
  top:40px;
}

Answer 2

您应该将您的语言 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;
}