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

这个奇怪的问题。我希望以下网站上的导航栏伸展整个页面宽度。为什么我的全角水平导航栏实际上不是全宽？

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; 
      }

解决任何帮助，这将不胜感激！

谢谢！

来源

2012-03-09 Chris

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

来源

2012-03-09 21:27:44 j08691

也许有一天我会停止错过最简单的错误，并节省自己很多时间！谢谢！！ – Chris 2012-03-09 21:43:47

适用于我们所有人;） – j08691 2012-03-09 21:44:16

使用Dominspector，我看到你了#wrapper指定属性

width: 1500px;

摆脱这一点，它工作正常。

编辑：哎呦，太晚了：V

来源

2012-03-09 21:29:28 Kisaro

稍迟一点 - 但无论如何谢谢！ – Chris 2012-03-09 21:44:46

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

回答

相关问题