我一直在玩我的引导导航栏。其原始位置设置为“固定”。现在,我已将其发送到绝对地址,此时将出现一个水平滚动条。如何防止滚动条出现?谢谢!
请记住,“ 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>
答案 0 :(得分:0)
您应注意其父母的margin
,即body
:
body{
margin:0px;
}
答案 1 :(得分:0)
通过将overflow-x:auto
更改为overflow-x:hidden
,我可以解决我的问题。