现在我对我的导航栏感到非常满意，它是我想要的中心，但是不是在指定宽度的末尾结束的白色背景框，而是运行屏幕的全长，如见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 */
如果这篇文章的格式不正确（或者这是一个愚蠢的问题），请原谅我。在此之前我从来没有编过任何代码，我从来没有在这个网站上发布过！任何反馈都表示赞赏。感谢
答案 0 :(得分：1)
在查看实际网站时编辑我的答案...此外，您还有其他一些需要纠正的错误。通过此网站运行您的网页并更正它指示的错误。
您已使用相同的名称对类进行了四次定义。这不行。如果您需要定义四个类，它们必须都有不同的名称。
-----------更新-------
好的，我解决了你的问题。这是代码，我将更改作为您可以删除的注释。您仍然应该通过验证器运行它，并修复问题。
您询问的问题需要在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"> </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>
答案 1 :(得分：0)
欢迎登机！
我希望您能在这个优秀的Q＆amp; A平台上找到所需的所有帮助。
此解决方案仅调整列表容器的大小。优点是您可以选择所需的宽度而不会影响页面的其余部分。缺点是无论何时向页面添加元素，都必须手动对齐/调整大小。
在CSS文件中添加：
ul#cssmenu1 {
width: 580px; /* Edit this line */
margin: 0 auto;
}
此解决方案通过调整body的大小来调整整个页面的大小，<html>是body元素的第一个显示子元素。缺点是你无法在body {
width: 580px; /* Edit this line */
margin: 0 auto;
}
元素之外扩展列表容器（好吧，至少没有黑客或副作用）。无论您将来添加或编辑什么，优势在于整个页面都具有一致的布局。此外，您可以通过仅更新一个值来调整整个页面的大小（如果它太小，或者如果您想要一个响应版本，...）。这绝对是我要采取的方向。
首先在CSS的顶部添加以下内容来调整整个身体的大小：
<table style="width:410px" align="center">
现在，在您的HTML页面第48行，替换：
<table>
以下内容：
{{1}}
当然，我并不是说没有其他解决方案，但是这两个解决方案是我想到的第一个解决方案。
另外，正如爱德华在答案中所说，请使用W3C's markup validator，因为使用标准标记可以为您提供更好的机会，使其符合所有类型的浏览器。您可以找到您提供的页面的结果here。您的CSS也无效，您可以使用CSS validator进行检查。