为什么导航菜单被切断？我们希望空格填充菜单项

Question

发生了一些事情，现在我们的导航菜单正在被切断。我们无法弄清楚发生了什么事......如果你进入页面，你会明白我的意思。 Github上页：https://tcffo.github.io/

Answer 1

尝试添加height: 60px或东西你id#header

Answer 2

#header nav { 
    letter-spacing: 0.075em; 
    position: absolute; 
    right: 1.5em; 
    text-transform: uppercase; 
    top: 0.75em; 
} 

position绝对需要你的资产净值进行布局。 #header不是，根据布局来讲，为空，因为nav已被取出。

从MDN

绝对定位被相对定位

元素仍然被认为是在文档中的元素的正常流动。相反，完全放置的元素会从流中取出，因此在放置其他元素时不会占用空间。绝对定位的元素相对于最近定位的祖先（非静态）进行定位。如果定位的祖先不存在，则使用初始容器。

注意：绝对定位的元素被从流中取出，因此在放置其他元素时不占用空间。

Answer 3

您可以使用几种不同的方法解决此问题。这是造成你的问题的#nav元素的绝对定位。

选项1：

#header>#nav{ 

    position:relative 

} 

#nav>ul{ 
    float:right; 
} 

如果你想保持绝对定位，你可以调整标题栏的高度来代替。

选项2：

#header{ 

    height:65px; 

}