导航栏不跨越页面宽度

【问题标题】：Navigation Bar not spanning width of page导航栏不跨越页面宽度
【发布时间】：2014-08-20 23:46:56
【问题描述】：

这是我第一次建立一个网站，我希望你们中的一些人能够帮助我，因为这里似乎有丰富的知识。我很难让导航栏横跨网页的长度。此外，我想去掉照片标题和导航栏之间的空间。我现在把它设为白色，但是当我悬停时，你可以看到空白。

我包含了所有代码（如果内容过多，我很抱歉，但我不确定什么是重要的，什么不是，因为我正在从一个不再在我实验室工作的用户的当前代码改编它）并且我非常感谢我能得到的所有帮助。

非常感谢！

更新：我按照 chandan 的建议做了一个 js fiddle http://jsfiddle.net/amchen/rzdmytqz/

我希望制作一个类似于我所查看的教程的网站： https://helpx.adobe.com/dreamweaver/learn/tutorials/how-to/first-website-part1.html

上图是我做一个测试网页时看到的。

我希望这能让您更好地了解我在设计方面的需求。

谢谢！

<style type="text/css">
<!--
#content {
background-color: #FFFFFF;
width: 100%;
height: 100%;
margin: 0 auto;
min-height: 100%;
height: auto;
}

a {
text-decoration: none;
}

#wrapper {
background-color: #FFFFFF;
width: 1400px;
min height: 100%;
position: relative;
height: 100%;
margin: 0 auto;
}

#content-spacer-top {
 height: 150px;
}

#content-spacer-bottom{
height:30px;
}

#header {
background-color: #357f7f;
height: 2%;
width: 100%;
}
#mainnav a {
display: block;
width: 12%;
float: left;
text-align: center;
background-color: #FFFFFF;
color: #357F7F;
padding-top: 6px;
padding-right: 0px;
padding-bottom: 6px;
padding-left: 0px;
border-top-color: #F0F0F0;
border-right-color: #F0F0F0;
border-bottom-color: #F0F0F0;
border-left-color: #F0F0F0;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
word-spacing: normal;
}

#mainnav a:hover,#mainnav a:active,#mainnav a:focus {
color: #FFFFFF;
text-decoration: none;
background-color: #357F7F;
}

a:visited {
color: #FFFFFF;
background-color: #357F7F;
}

#footer {
width:100%;
height:6%;
background color:#357f7f
position:absolute;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
.style6 {font-size: 12px}
-->
</style>
</head>

<body bgcolor="#CCCCCC" text="#000000" leftmargin="10%" topmargin="0" rightmargin="10%"  marginwidth="0" marginheight="0"  onLoad="MM_preloadImages('images/indexfigures/surfover.jpg','images/indexfigures/3over.jpg' ,'images/indexfigures/4over.jpg','images/indexfigures/5over.jpg')" font>

 <div id="wrapper">
 <div id="header"></div>

 <nav id="mainnav">
  <img src="images/NewTitle copy.jpg" align="middle">
<ul style="list-style: none;">
      <li><a href="index.htm">HOME</a></li>
      <li><a href="research.htm">RESEARCH</a></li>
      <li><a href="susantaylor.htm">SUSAN TAYLOR</a></li>
      <li><a href="LabMembersRecent.htm">LAB MEMBERS</a></li>
      <li><a href="publications.htm">PUBLICATIONS</a></li>
      <li><a href="links.htm">LINKS</a></li>
      <li><a href="contact.htm">CONTACT US</a></li>
      <li><a href="reagents.htm">REAGENT REQUESTS</a></li>
</ul>
  </nav>

<div id= "content" align="center"> 
<br>
<div id="content-spacer-top"> </div>
<div id="content-inner"> 

<!-- TemplateBeginEditable name="EditRegion3" -->

        <table width="75%" border="0" align="center" cellpadding="2" cellspacing="0">
          <tr valign="top" bgcolor="#FFFFFF"> 
            <td width="20%" height="113" align="center"><a   href="javascript:openWindow('Figurepanes/PKAfigure.htm')" 
                    onMouseOut="MM_swapImgRestore()" 
                     onMouseOver="MM_swapImage('Image14','','images/indexfigures/1over.jpg',1)"><img  src="images/indexfigures/1out.jpg" name="Image14" width="113" height="113" border="0"></a> </td>
            <td width="16%" align="center">
                <a href="javascript:openWindow('Figurepanes/surface.htm')" 
                    onMouseOut="MM_swapImgRestore()" 
                     onMouseOver="MM_swapImage('Image15','','images/indexfigures/surfover.jpg',1)">
                    <img src="images/indexfigures/surfout.jpg" name="Image15"  width="91" height="113" border="0"></a>                </td>
            <td width="21%" align="center">
                <a href="javascript:openWindow('Figurepanes/Rsub1.htm')" 
                onMouseOut="MM_swapImgRestore()" 
                onMouseOver="MM_swapImage('Image22','','images/indexfigures/3over.jpg',1)">
                <img src="images/indexfigures/3out.jpg" name="Image22" width="161" height="113" border="0"></a>                </td>
            <td width="12%" align="center">
                <a href="javascript:openWindow('Figurepanes/PBC.htm')" 
                onMouseOut="MM_swapImgRestore()" 
                onMouseOver="MM_swapImage('Image23','','images/indexfigures/4over.jpg',1)">
                <img src="images/indexfigures/4out.jpg" name="Image23" width="95" height="113" border="0"></a>                </td>
            <td width="19%" align="center">
            <a href="javascript:openWindow('figurepanes/local1.htm')" 
                onMouseOut="MM_swapImgRestore()" 
                onMouseOver="MM_swapImage('Image24','','images/indexfigures/5over.jpg',1)">
                <img src="images/indexfigures/5out.jpg" name="Image24" width="139" height="113" border="0"></a>                </td>
          </tr>
   </table>

 <table width="75%" align="center" table id="table_text">
  <tr>
<th scope="col"></th>
  </tr>
</table>
<!-- TemplateEndEditable --></div>
<div id="content-space bottom"></div>

</div>

<div class="footer" id="footer">
 <div align="center">
<p>content here</p>
    </div>
</div>

</div>
</body>
</html>

【问题讨论】：

    标签： css header navigationbar


    【解决方案1】：

    尝试将#wrapper 中的宽度设置为100%。另外，我不知道这是否重要，但您的整个样式部分看起来已被注释掉。有点难以看到发生了什么，因为您的图片都不可见。

    【讨论】：

      【解决方案2】：

      这是因为您的导航位于主包装器内，而“#wrapper”的宽度为 1400 像素。将 Navigation 从主包装中取出，它将拉伸 100%；

      <head>
<style type="text/css">
<!--
 #content {
 background-color: #FFFFFF;
 width: 100%;
 height: 100%;
 margin: 0 auto;
min-height: 100%;
height: auto;
}

a {
text-decoration: none;
}

#wrapper {
background-color: #FFFFFF;
width: 1400px;
min height: 100%;
position: relative;
height: 100%;
margin: 0 auto;
}

#content-spacer-top {
 height: 150px;
}

#content-spacer-bottom{
height:30px;
}

#header {
background-color: #357f7f;
height: 2%;
width: 100%;
}
#mainnav a {
display: block;
width: 12%;
float: left;
text-align: center;
background-color: #FFFFFF;
color: #357F7F;
padding-top: 6px;
padding-right: 0px;
padding-bottom: 6px;
padding-left: 0px;
border-top-color: #F0F0F0;
border-right-color: #F0F0F0;
border-bottom-color: #F0F0F0;
border-left-color: #F0F0F0;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
word-spacing: normal;
}

#mainnav a:hover,#mainnav a:active,#mainnav a:focus {
color: #FFFFFF;
text-decoration: none;
background-color: #357F7F;
}

a:visited {
color: #FFFFFF;
background-color: #357F7F;
}

#footer {
width:100%;
height:6%;
background color:#357f7f
position:absolute;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
.style6 {font-size: 12px}
-->
</style>
</head>

<body bgcolor="#CCCCCC" text="#000000" leftmargin="10%" topmargin="0" rightmargin="10%"  marginwidth="0" marginheight="0"  onLoad="MM_preloadImages('images/indexfigures/surfover.jpg','images/indexfigures/3over.jpg' ,'images/indexfigures/4over.jpg','images/indexfigures/5over.jpg')" font>


 <div id="header"></div>

 <nav id="mainnav">
  <img src="images/NewTitle copy.jpg" align="middle">
<ul style="list-style: none;">
      <li><a href="index.htm">HOME</a></li>
      <li><a href="research.htm">RESEARCH</a></li>
      <li><a href="susantaylor.htm">SUSAN TAYLOR</a></li>
      <li><a href="LabMembersRecent.htm">LAB MEMBERS</a></li>
      <li><a href="publications.htm">PUBLICATIONS</a></li>
      <li><a href="links.htm">LINKS</a></li>
      <li><a href="contact.htm">CONTACT US</a></li>
      <li><a href="reagents.htm">REAGENT REQUESTS</a></li>
</ul>
  </nav>
 <div id="wrapper">


<div id= "content" align="center"> 
<br>
<div id="content-spacer-top"> </div>
<div id="content-inner"> 

<!-- TemplateBeginEditable name="EditRegion3" -->

        <table width="75%" border="0" align="center" cellpadding="2" cellspacing="0">
          <tr valign="top" bgcolor="#FFFFFF"> 
            <td width="20%" height="113" align="center"><a   href="javascript:openWindow('Figurepanes/PKAfigure.htm')" 
                    onMouseOut="MM_swapImgRestore()" 
                     onMouseOver="MM_swapImage('Image14','','images/indexfigures/1over.jpg',1)"><img  src="images/indexfigures/1out.jpg" name="Image14" width="113" height="113" border="0"></a> </td>
            <td width="16%" align="center">
                <a href="javascript:openWindow('Figurepanes/surface.htm')" 
                    onMouseOut="MM_swapImgRestore()" 
                     onMouseOver="MM_swapImage('Image15','','images/indexfigures/surfover.jpg',1)">
                    <img src="images/indexfigures/surfout.jpg" name="Image15"  width="91" height="113" border="0"></a>                </td>
            <td width="21%" align="center">
                <a href="javascript:openWindow('Figurepanes/Rsub1.htm')" 
                onMouseOut="MM_swapImgRestore()" 
                onMouseOver="MM_swapImage('Image22','','images/indexfigures/3over.jpg',1)">
                <img src="images/indexfigures/3out.jpg" name="Image22" width="161" height="113" border="0"></a>                </td>
            <td width="12%" align="center">
                <a href="javascript:openWindow('Figurepanes/PBC.htm')" 
                onMouseOut="MM_swapImgRestore()" 
                onMouseOver="MM_swapImage('Image23','','images/indexfigures/4over.jpg',1)">
                <img src="images/indexfigures/4out.jpg" name="Image23" width="95" height="113" border="0"></a>                </td>
            <td width="19%" align="center">
            <a href="javascript:openWindow('figurepanes/local1.htm')" 
                onMouseOut="MM_swapImgRestore()" 
                onMouseOver="MM_swapImage('Image24','','images/indexfigures/5over.jpg',1)">
                <img src="images/indexfigures/5out.jpg" name="Image24" width="139" height="113" border="0"></a>                </td>
          </tr>
   </table>

 <table width="75%" align="center" table id="table_text">
  <tr>
<th scope="col"></th>
  </tr>
</table>
<!-- TemplateEndEditable --></div>
<div id="content-space bottom"></div>

</div>

<div class="footer" id="footer">
 <div align="center">
<p>content here</p>
    </div>
</div>

</div>
</body>
</html>

      【讨论】：

      • chandan，谢谢！我已经创建了一个小提琴，你会看一下吗？我还包含了一个链接，用于我试图对其进行建模的网站的设计。非常感谢您的意见！
      • 嗨，chandan，我终于想通了！我需要调用#main nav ul 并更改参数。我正在研究其他内容（页脚和下拉菜单），但感谢您的帮助！
      • 您好安吉拉，非常欢迎，乐于提供帮助。
      【解决方案3】：

      您的样式代码中有一些错误。确保在要实现的每种样式后输入分号。 background-color 之间也应该有连字符（请参阅样式标签中的#footer 部分）。除非您将两个项目都放在 .我现在已经尽可能多地尝试了。随着图像大小的增加，您可以减小#mainnav 的宽度。您还需要增加标题的高度。标题的 2% 高度隐藏了大部分内容。我用display:inline-block得到导航栏和图片在同一平面：

      <head>
<style type="text/css">
<!--
#content {
background-color: #FFFFFF;
width: 100%;
height: 100%;
margin: 0 auto;
min-height: 100%;
height: auto;
}

a {
text-decoration: none;
}

#wrapper {
background-color: #FFFFFF;
width: 1400px;
min-height: 100%;
position: relative;
height: 100%;
margin: 0 auto;
}

#content-spacer-top {
height: 150px;
}

#content-spacer-bottom{
height:30px; 
}

#header {
background-color: #357f7f;
height: 100px;
width: 100%;
}

#mainnav{
height:50px;
display:inline-block;
width:1300px;
}

#mainnav img{
display:inline-block;
width:50px;
height:50px;
position:absolute;
}
#mainnav a {
display: inline-block;
width: 12%;
float:right;
text-align: center;
background-color: #FFFFFF;
color: #357F7F;
padding-top: 6px;
padding-right: 0px;
padding-bottom: 6px;
padding-left: 0px;
border-top-color: #F0F0F0;
border-right-color: #F0F0F0; 
border-bottom-color: #F0F0F0;
border-left-color: #F0F0F0;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
word-spacing: normal;
}

#mainnav a:hover,#mainnav a:active,#mainnav a:focus {
color: #FFFFFF;
text-decoration: none;
background-color: #357F7F;
}

a:visited {
color: #FFFFFF;
background-color: #357F7F; 
}

#footer {
width:100%;
height:6%;
background:#357f7f;
position:absolute;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
.style6 {font-size: 12px}
-->
</style>
</head>

<body bgcolor="#CCCCCC" text="#000000" leftmargin="10%" topmargin="0" rightmargin="10%"  marginwidth="0" marginheight="0"  onLoad="MM_preloadImages('images/indexfigures/surfover.jpg','images/indexfigures/3over.jpg' ,'images/indexfigures/4over.jpg','images/indexfigures/5over.jpg');">


<div id="header">
<img src="images/NewTitle copy.jpg" align="middle">
<nav id="mainnav">

<ul style="list-style: none;">
  <li><a href="index.htm">HOME</a></li>
  <li><a href="research.htm">RESEARCH</a></li>
  <li><a href="susantaylor.htm">SUSAN TAYLOR</a></li>
  <li><a href="LabMembersRecent.htm">LAB MEMBERS</a></li>
  <li><a href="publications.htm">PUBLICATIONS</a></li>
  <li><a href="links.htm">LINKS</a></li>
  <li><a href="contact.htm">CONTACT US</a></li>
  <li><a href="reagents.htm">REAGENT REQUESTS</a></li>
</ul>
</nav>
</div>
 <div id="wrapper">
 <div id= "content" align="center"> 
 <br>
 <div id="content-spacer-top"> </div>
 <div id="content-inner"> 

 <!-- TemplateBeginEditable name="EditRegion3" -->

<table width="75%" border="0" align="center" cellpadding="2" cellspacing="0">
<tr valign="top" bgcolor="#FFFFFF"> 
<td width="20%" height="113" align="center"><a     href="javascript:openWindow('Figurepanes/PKAfigure.htm')"                 onMouseOut="MM_swapImgRestore()"                   onMouseOver="MM_swapImage('Image14','','images/indexfigures/1over.jpg',1)"><img  src="images/indexfigures/1out.jpg" name="Image14" width="113" height="113" border="0"></a>          </td>
        <td width="16%" align="center">
            <a href="javascript:openWindow('Figurepanes/surface.htm')" 
                onMouseOut="MM_swapImgRestore()" 
                 onMouseOver="MM_swapImage('Image15','','images/indexfigures/surfover.jpg',1)">
                <img src="images/indexfigures/surfout.jpg" name="Image15"  width="91" height="113" border="0"></a>                </td>
        <td width="21%" align="center">
            <a href="javascript:openWindow('Figurepanes/Rsub1.htm')" 
            onMouseOut="MM_swapImgRestore()" 
            onMouseOver="MM_swapImage('Image22','','images/indexfigures/3over.jpg',1)">
            <img src="images/indexfigures/3out.jpg" name="Image22" width="161" height="113" border="0"></a>                </td>
        <td width="12%" align="center">
            <a href="javascript:openWindow('Figurepanes/PBC.htm')" 
            onMouseOut="MM_swapImgRestore()" 
            onMouseOver="MM_swapImage('Image23','','images/indexfigures/4over.jpg',1)">
            <img src="images/indexfigures/4out.jpg" name="Image23" width="95" height="113" border="0"></a>                </td>
        <td width="19%" align="center">
        <a href="javascript:openWindow('figurepanes/local1.htm')" 
            onMouseOut="MM_swapImgRestore()" 
            onMouseOver="MM_swapImage('Image24','','images/indexfigures/5over.jpg',1)">
            <img src="images/indexfigures/5out.jpg" name="Image24" width="139" height="113" border="0"></a>                </td>
      </tr>
 </table>

 <table width="75%" align="center" table id="table_text">
 <tr>
 <th scope="col"></th>
 </tr>
 </table>
 <!-- TemplateEndEditable --></div>
 <div id="content-space bottom"></div>

 </div>
 </div>

 <div class="footer" id="footer">
 <div align="center">
 <p>content here</p>
 </div>
 </div>

      【讨论】：

      • 感谢您为我做出所有这些更正！我实际上将它输入到 adobe dreamweaver 并得到了一个看起来很奇怪的网页。你能看看我的 jsfiddle 和我要设计的页面类型的链接吗？非常感谢您的意见！
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-12-12
      • 1970-01-01
      • 1970-01-01
      • 2014-02-12
      • 2012-10-19
      • 2015-10-16
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode