无法使导航栏停止显示水平滚动条

时间:2018-09-27 02:43:57

标签: javascript html css

我一直在玩我的引导导航栏。其原始位置设置为“固定”。现在,我已将其发送到绝对地址,此时将出现一个水平滚动条。如何防止滚动条出现?谢谢!

请记住,“ 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>

2 个答案:

答案 0 :(得分:0)

您应注意其父母的margin,即body

body{
  margin:0px;
}

答案 1 :(得分:0)

通过将overflow-x:auto更改为overflow-x:hidden,我可以解决我的问题。