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;正在创建问题

<header>元素小于内容隐藏<nav> <ul> ... </ul> </nav> </header>

1 个答案: