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

Question

这个问题很奇怪。我希望以下站点上的导航栏能够拉伸(stretch)页面的整个宽度。

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 的宽度为 1500 像素。删除它或将其更改为 100%，您应该没问题。