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;
}

Answer 2

在课程名称前需要一个点：

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