导航栏拉伸到覆盖屏幕答案

【问题标题】：Navigation bar stretched to cover screen导航栏拉伸到覆盖屏幕
【发布时间】：2014-07-15 20:53:21
【问题描述】：

现在我对我的导航栏相当满意，它以我想要的方式居中，但是它不是以指定宽度结尾的白色背景框，而是在屏幕的整个长度上运行，如见 www.rebeccahenrydesign.com/about.html 有谁知道我可以给它一个指定的长度。

这是我的html

<script type="text/javascript" src="csshorizontalmenu.js">

/***********************************************

* CSS Horizontal List Menu- by JavaScript Kit (www.javascriptkit.com)
* Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy-     vertical-menu/ 
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more

***********************************************/

</script>

<div class="horizontalcssmenu">
    <ul id="cssmenu1">
    <li><a href="http://rebeccahenrydesign.com">Home</a></li>
    <li><a href="#">Work</a>
    <ul>
    <li><a href="print.html">Print</a></li>
    <li><a href="print.html">Digital</a></li>
    <li><a href="print.html">Photography</a></li>
    </ul>
</li>
<li><a href="about.html" >About</a></li>
<li><a href="contact.html" >Contact</a>

</li>

这里是css

.horizontalcssmenu ul{
padding: 0;
list-style-type: none;
background:white;
}

/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline-block;
float: none;

}

/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: block;
width: 120px; /*Width of top level menu link items*/
padding: 2px 8px;
border: 1px white;
border-left-width: 0;
text-decoration: none;
background: white;
color: #f77bb1;
font: 20px Helvetica,sans-serif;
}

/*Sub level menu*/
.horizontalcssmenu ul li ul{
left: 0;
top: 0;
border-top: 1px white;
position: absolute;
display: block;
visibility: hidden;
z-index: 100;
}

/*Sub level menu list items*/
.horizontalcssmenu ul li ul li{
display: inline;
float: none;
}


/* Sub level menu links style */
.horizontalcssmenu ul li ul li a{
width: 160px; /*width of sub menu levels*/
font-weight: normal;
padding: 2px 5px;
background: white;
border-width: 0 1px 1px 1px;
}

.horizontalcssmenu ul li a:hover{
background: #f77bb1;
color:white;
}

.horizontalcssmenu ul li ul li a:hover{
background: #f77bb1;
}

.horizontalcssmenu .arrowdiv{
position: absolute;
right: 0;
background: transparent url(menuarrow.gif) no-repeat center left;
}

* html p#iepara{ /*For a paragraph (if any) that immediately follows menu, add 1em top          spacing between the two in IE*/
padding-top: 1em;
}

/* Holly Hack for IE \*/
* html .horizontalcssmenu ul li { float: left; height: 1%; }
* html .horizontalcssmenu ul li a { height: 1%; }
/* End */

如果这篇文章的格式不正确（或者这是一个愚蠢的问题），请原谅我。在此之前我从未编写过任何代码，也从未在此网站上发布过！任何反馈表示赞赏。谢谢

【问题讨论】：

例如，将width: 600px; 和margin: 0 auto; 添加到body 中的rebeccahenrydesign.com/aboutstyle.css
@Becca，别忘了“接受”对你有帮助的答案。

标签： html css drop-down-menu menu navigation

【解决方案1】：

在查看实际网站时编辑我的答案...此外，您还有一些其他错误需要更正。通过此网站运行您的网页并更正它指示的错误。

您已经用相同的名称定义了四次类。这行不通。如果你需要定义四个类，它们必须有不同的名字。

http://validator.w3.org/

-----------更新-------

好的，我解决了你的问题。这是代码，我的更改是您可以删除的 cmets。您仍然应该通过验证器运行它，并修复问题。

你问的问题需要在 div 元素中设置宽度和边距。您还应该解决其他问题，但这解决了您的主要问题。

 <!DOCTYPE html>
 <html>
 <head>
 <!-- Declared character encoding --> <meta charset="utf-8">
 <!-- Inserted required title element --> <title>About Rebecca Henry</title>
 <!-- Moved link element from body to head --><link rel="stylesheet" type="text/css"      href="csshorizontalmenu.css">
 <!-- Moved Script to the head element --><script type="text/javascript" src="csshorizontalmenu.js">

 /***********************************************

 * CSS Horizontal List Menu- by JavaScript Kit (www.javascriptkit.com)
 * Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy- vertical-menu/ 
 * This notice must stay intact for usage
 * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more

 ***********************************************/

 </script>
 </head>
 <body>
 <h1>About Rebecca Henry</h1>




 <!-- Added a width and a margin. This solves your white bar problem. --><div class="horizontalcssmenu" style="width: 556px; margin: auto">
 <ul id="cssmenu1">
 <li><a href="http://rebeccahenrydesign.com">Home</a></li>
 <li><a href="#">Work<span class="arrowdiv">&nbsp;&nbsp;&nbsp;&nbsp;</span></a>
     <ul style="top: 27px;">
     <li><a href="print.html">Print</a></li>
     <li><a href="print.html">Digital</a></li>
     <li><a href="print.html">Photography</a></li>
     </ul>
 </li>
 <li><a href="about.html">About</a></li>
 <li><a href="contact.html">Contact</a>

 </li>
 </ul>
 </div>
 <!--Split the menu from the table with separate div elements -->
 <div>

 <br>
 <br>
 <br>


     <img src="images/profile.jpg" alt="Profile">


     <!-- changed align center to margin auto inline style --><br><table style="width:410px; margin: auto">

     <tbody><tr> 
     <td>
     <p>
     Hello Friends, 
     <br>
        My name is Rebecca Henry and I am a Graphic
     Designer out of Richmond Virginia. I love 
     working with different mediums, but print is 
     by far my favorite. Experimentation
     and trial and <br> error are important factors in my work. I 
     try to think out of the box and try as many 
     things as I possibly can. The work on this site 
is comprised mostly of work from my junior year 
of college at Virginia Commonwealth University, 
and also of the work I completed at an internship 
with a local luxary car service by the name of 
bioRide. I am passionate about useing my talent to help others in any way I can. My dream job would be to work with a non-profit creating meaningful work. I do not work in hopes of fame or foutune, but simply for the love of what I do. If you have any questions or comments 
about the work, I am always happy to hear them. 
My contact information can be found on the contact
page. I am currently a student, and always looking 
for employment so please feel free to contact me 
in those regards also. Thank you for visiting my page!
</p>
</td>

</tr>


</tbody></table>

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

【讨论】：

您因推荐我们的标记验证器而获得投票！感谢您对标准的支持。

【解决方案2】：

欢迎加入！

希望您能在这个出色的问答平台上找到您需要的所有帮助。

“本地”解决方案

此解决方案仅调整列表容器的大小。优点是您可以选择所需的宽度，而不会影响页面的其余部分。缺点是每当您向页面添加元素时，您都必须手动对齐/调整大小。

将此添加到您的 CSS 文件中：

ul#cssmenu1 {
  width: 580px; /* Edit this line */
  margin: 0 auto;
}

“全球”解决方案

此解决方案通过调整body 的大小来调整整个页面的大小，这是<html> 元素的第一个显示的子元素。缺点是你不能在body 元素之外扩展你的列表容器（好吧，至少不是没有黑客或副作用）。优点是您在整个页面中都有一致的布局，无论您将来添加或编辑什么。此外，您可以通过仅更新一个值来调整整个页面的大小（如果它太小，或者如果您想要一个响应版本，...）。这绝对是我会采取的方向。

首先通过在 CSS 顶部添加以下内容来调整整个正文的大小：

body {
  width: 580px; /* Edit this line */
  margin: 0 auto;
}

现在，在您的 HTML 页面中，第 48 行，替换：

<table style="width:410px" align="center">

以下内容：

<table>

当然，我并不是说没有其他解决方案，而是这两个是我首先想到的。

另外，正如 Edward 在他的回答中所说，请使用 W3C's markup validator，因为使用标准标记可以让您（除其他外）有更好的机会与各种浏览器兼容。可以找到您提供的页面的结果here。你的CSS也是无效的，你可以用CSS validator检查一下。

【讨论】：