我有一个导航栏,如果要滚动,我想将其放下。
这就是为什么我在这里给position: fixed;

现在,如果更改浏览器窗口的大小,则看不到右侧的链接(无法将导航栏滚动到右侧)。我认为是因为position: fixed;,但我不知道如何解决。

这是我的代码:



*{
    margin: 0px;
    padding: 0px;
    font-family: 'Oswald', sans-serif;
}

body{
    height: 2000px;
    background-color: rgb(35, 35, 38);
}

nav{
    width: 100%;
    background-color: rgb(14, 14, 14);
    overflow: hidden;
    border-bottom: 2px solid black;
    margin-bottom: 5px;
    position: fixed;
    top: 0;
}

.nav-top-ul{
    font-size: 0px;
    width: 1000px;
    margin: 0px auto;
}

section{
    margin: 0px auto;
    width: 1000px;
    margin-top: 50px;
    word-wrap: break-word;

}

.nav-top-li{
    display: inline-block;
}

.nav-top-a{
    display: block;
    font-size: 16px;
    padding: 10px 20px;
    color: rgb(137, 137, 137);
    transition: all 0.5s;
    text-decoration: none;
}

.nav-top-a:hover{
    color: white;
}

.right{
    float: right;
}

.left{
    float: left;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Seite</title>
        <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

    </head>
    <body>
        <nav>
            <ul class="nav-top-ul">
                <div class="left">
                    <li class="nav-top-li"><a  class="nav-top-a" href="index.php?content=home">NameDerSeite</a></li>
                </div>
                <div class="right">
                    <li class="nav-top-li"><a  class="nav-top-a" href="index.php?content=home">Login</a></li>
                    <li class="nav-top-li"><a  class="nav-top-a" href="index.php?content=home">Register</a></li>
                </div>
            </ul>
        </nav>

        <section>
            <p>Example... Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...</p>
        </section>
    </body>
</html>

最佳答案

position: fixed无关。您只需将导航栏的宽度设置为1000px。将其设置为100%即可。

.nav-top-ul{
    font-size: 0px;
    width: 1000px; // Change this to 100%
    margin: 0px auto;
}

关于html - CSS导航栏已修复,无法滚动,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29103788/

10-12 12:25
查看更多