Question

我有一个导航栏，如果我滚动，我想下来。
这就是我给这里position: fixed;

的原因

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

这是我的代码：

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 1

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

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

Answer 2

添加：

  position: fixed;
  right: 5px;

到.right css。

.right {
float: right;
position: fixed;
right: 5px;
}

CSS导航栏固定，无法滚动

2 个答案: