Question

这一个奇怪的问题。我希望以下网站上的导航栏可以拉伸页面的整个宽度。

http://testing.xenongroupadmin.com/bitesize/profile/summary.php

乍一看，看起来工作正常，没问题。但是，由于某种原因，底部有一个水平滚动条。当您向右滚动时，导航栏会突然停止，只留下一个很大的空白区域。

如何摆脱滚动条以使页面停留在导航栏的边缘？

导航栏的HTML代码为：

<div id="topbanner">  
<div id="logologin">

<image src="../images/minibitesizelogo.png" id="logo" alt="Xenon Group Bitesize Logo" />

<ul id="topnav">
 <li id="profile"><a href="../profile/summary.php">Home</a></li>
 <li id="choose"><a href="../choose/intro.php">Choose a Course</a></li>
 <li id="about"><a href="../about/whatis.php">About Bitesize</a></li>
 <li id="contact"><a href="../contact/contact.php">Contact Us</a></li>
 <li id="logout">Log Out</li>
</ul>

</div>
</div>

相应的CSS是：

body  { 
            font-family: arial, tahoma, verdana, sans-serif;
    background: linear-gradient(top, #FFFFFF 62%, #CDEDFA 89%);
    background: -o-linear-gradient(top, #FFFFFF 62%, #CDEDFA 89%);
    background: -moz-linear-gradient(top , #FFFFFF 62%, #CDEDFA 89%);
    background: -webkit-linear-gradient(top, #FFFFFF 62%, #CDEDFA 89%);
    background: -ms-linear-gradient(top, #FFFFFF 62%, #CDEDFA 89%);
    margin: 0px;
    width: 100%;
    }

div#topbanner { background-image: url('../images/navbar5.png');
        height: 55px;
        background-repeat: repeat-x;
       }

div#logologin { margin: auto;
        width: 950px;
       }

#logo {  
     float: left;
     margin-top: 2px;
     margin-right: 15px;
     margin-left: 23px;
        }

ul#topnav { list-style-type: none;
    margin: 0px;
    }

ul#topnav li { 
       width: 153px;
       text-align: center;
       border-left: thin solid #02a2e0;
       height: 39px;
       padding: 0px;
       padding-top: 16px;
       float: left;
       background-image: url('../images/navbar5.png');
       }

ul#topnav li#logout { border-right: thin solid #02a2e0;
          }

非常感谢任何解决此问题的帮助！

谢谢！

Answer 1

您的包装器div的宽度为1500px。删除它或将其更改为100％，你应该没事。

Answer 2

使用Dominspector，我看到你的#wrapper获得了属性

    width: 1500px;

摆脱它，它工作正常。

编辑：哎呀，太晚了：V

为什么我的全宽水平导航栏实际上不是全宽？

2 个答案: