Question

所以我正在建立一个网站，我的导航栏有一个奇怪的问题。注意我正在使用引导程序，但此导航栏不是引导程序导航栏。

首先，我要粘贴我的代码。

这是HTML：

<div id="nav">
<div class="toppic">
<!-- Logo -->
<img src="logo.jpg" class="img-responsive" id="log">
</div>
<div class="line">
</div>
<div class="navy">
    <ul class="navul">


        <li class="navli"> <a href="index.php">  </a> <div class="testbox active home"> Home </div>    </li>
        <li class="navli"> <a href="about.php">  </a> <div class="testbox"> About </div> </li>
        <li class="navli"> <a href="goals.php">  </a> <div class="testbox  "> Goals </div> </li>
        <li class="navli"> <a href="partners.php">  </a> <div class="testbox"> Partners </div> </li>
        <li class="navli"> <a href="contact.php">  </a> <div class="testbox"> Contact </div> </li>
    </ul>
</div>

这是CSS：

#nav
{
position: relative;
left: 3%;

width: 97% !important;
margin: 0px !important;

}
.line
{
border-left:1px solid #000;
border-bottom:1px solid #000;
height: 1px;
width: 70%;
position:absolute;
top: 36%;
left:23%;
}
.navy
{
position: absolute;
margin-left: 55%;
width: 35%;
}
 .toppic
{
width: 94% !important;
margin: 0px !important;
}
#log
{
 margin: 0 0 0 0 !important;

}

现在的问题是导航栏在右侧有一个不需要的边距，即使在对整个导航栏应用margin：0px！important之后也是如此。只有在您不以全屏方式查看网站时才会显示（至少在我的显示器上）。此边距的问题在于它向网站添加了一个水平滚动条，当您向右滚动时，由此边距导致的空白区域没有任何元素。

有人知道问题是什么吗？

注意我没有包含其他类，因为在检查chrome中的导航栏时我可以看到它们没有奇怪的边距，只有 <div id="nav"> 有它。不是它的子元素。根据要求，我也会添加其他课程。

编辑 Jsfiddle：https://jsfiddle.net/j9s7st15/ （请注意，这有一些未使用的css类，但至少会出现问题）。 Jsfiddle有一些其他的错误，因为我没有包含很多我的CSS，但就像我说的那样，我想要解决的问题也存在。

Answer 1

这就是我调整你的css的方法：

.navy {
    position: absolute;
    /* margin-left: 55%; Remove left margin */
    width: 35%;
    right: 0;
}

对于#nav我改变了左：0;

Answer 2

它是由身体上的边距引起的，如果你添加一个margin:0它就会消除它。

body
{
    height: 100%;
    width: 100%;
    margin:0;
}

更新了jsfiddle https://jsfiddle.net/d5qt5x4x/

Answer 3

删除此行margin-left：55％;

CSS bootstrap与导航栏边距有一个奇怪的问题

3 个答案: