<header>元素比内容hidding <nav><ul>小...</ul></nav>

Question

我有一个<header>元素在我的网页，但我想以显示其内容时失败。它是页面顶部的一个非常简单的标题，带有导航部分。但是每个<li>上的文本都会一直走出页眉区域，这是一个问题，因为我的背景是黑暗的，文本是在外面。

`

header { 
display: block; 
position: fixed; 
top: 0px; 
width: 100%; 
} 

nav { 
display: inline-block; 
overflow: auto; 
position: absolute; 
height: 100%; 
right: 0px; 
text-align: center; 
} 

nav li { 
display: inline-block; 
} 

nav a { 
color: #FFF; 
} 
a > span { 
display: block; 
} 

`

---

<header id="header"> 
    <div id="logo"> 
     <a href="http://link"> <img src="http://link/logo.png" alt="text"> </a> 
    </div> 
    <nav id="menu"> 
     <ul> 
      <li id="menu_1"> 
       <a href="http://link">Home<span>Text,text,text</span></a> 
      </li> 
      <li id="menu_2"> 
       <a href="http://link">Contact<span>Text,text,text</span></a> 
      </li> 
     </ul> 
    </nav> 
</header> 

有什么想法？

Answer 1

你的CSS改成这样：

header { 
    display: block; 
    position: fixed; 
    top: 0px; 
    width: 100%; 
    background: rgba(0, 0, 0, 0.8); 
} 
nav { 
    display: inline-block; 
    overflow: auto; 
    height: 100%; 
    right: 0px; 
    text-align: center; 
} 
nav li { 
    display: inline-block; 
} 

position: absolute;的资产净值为创造一个问题