个人中心
gpt4 book ai didi

html - 导航栏拉伸(stretch)到覆盖屏幕

转载 作者：行者123 更新时间：2023-11-28 17:37:46 25 4
gpt4 key购买 nike

现在我对我的导航栏相当满意，它以我想要的方式居中，但是它不是在指定宽度的末尾结束的白色背景框，而是在屏幕的整个长度上运行，因为参见 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 */

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

最佳答案

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

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

http://validator.w3.org/

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

好的，我解决了你的问题。这是代码，我所做的更改作为您可以删除的评论。您仍然应该通过验证器运行它，并解决问题。

您询问的问题要求在 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>

关于html - 导航栏拉伸(stretch)到覆盖屏幕，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24767974/

25 4 0
文章推荐： html - 子 div 的大小不应增加，而只能相对于父 div 减小大小
文章推荐： objective-c - 适用于 iOS 的 GluUnProject
文章推荐： ios - 嵌入 Youtube 视频显示黑屏
文章推荐： iphone - iOS iPhone Phonegap HTML App 滚动条和设备宽度问题