javascript - 无法让导航栏停止显示水平滚动条

Question

我一直在玩我的 Bootstrap 导航栏。它的原始位置设置为“固定”。现在我已经将它发送到 absolute，出现了一个水平滚动条。如何防止滚动条出现？谢谢!

请记住“overflow-x: auto;”和“空白:nowrap；”在我的导航 ID 中只是我试图阻止水平滚动条出现的一种方法。

#nav {
    height: 100px;
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    transition: all ease .5s;
    z-index: 9999;
    overflow-x: auto;
    white-space: nowrap;
}

#logo {
    height: 45px;
    transition: all ease .5s;
    margin-top: 15px;
    margin-left: 50px;
}

#nav a {
    transition: all ease .5s;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
	color: white;
} 

.navbar-default .navbar-nav > li > a {
    margin-right: 50px;
    margin-top: 30px;
	font-size: 18px;
    font-weight: bolder;
}

  <div class="navbar navbar-default" id = "nav">
    <div class="navbar-header">
          <a class="navbar-brand" href="#"><img src="img/logo.png" id="logo" alt="Logo Motive Digital"/></a>
        </div>
    <ul class="nav navbar-nav navbar-right">       
      <li><a href="about.html" class="effect-underline">ABOUT</a></li>
      <li><a href="serivces.html" class="effect-underline">SERVICES</a></li>
      <li><a href="work.html" class="effect-underline">WORK</a></li>       
      <li><a href="contact.html" class="effect-underline">CONTACT</a></li>
    </ul>
  </div>

Answer 1

您应该注意其父级的margin，即body:

body{
  margin:0px;
}